Comment obtenir l'effet de chargement avant que la requête ajax ne soit terminée ? (exemple de code)

Le contenu de cet article est de présenter comment obtenir l'effet de chargement avant que la requête ajax ne soit terminée ? (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Souvent, nous devons introduire des frameworks pour développer des projets. À ce stade, nous pouvons rencontrer le problème que le code source n'a pas été chargé avant le chargement de la page, ce qui donne à l'utilisateur une mauvaise expérience visuelle. chargement. , pour améliorer l’expérience utilisateur !

Exemple de code :

 /*loading.js*/
// 加载HTML图
var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;background-color: #fff;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><img src="images/loading.gif" style="vertical-align: middle;width: 100px;">加载中。。。</div></div>';

// 呈现loading效果
document.write(_LoadingHtml);

// 监听加载状态改变
document.onreadystatechange = completeLoading;

// 加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loadingDiv');
        loadingMask.parentNode.removeChild(loadingMask);
    }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!