Implémentation de l'effet d'animation du chargement avant la fin de la requête ajax-js tutoriel-php.cn

Implémentation de l'effet d'animation du chargement avant la fin de la requête ajax

不言

Libérer： 2018-08-02 11:58:31

original

3729 Les gens l'ont consulté

Cet article vous présente l'implémentation de l'effet d'animation du chargement avant que la requête ajax ne soit terminée. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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 aux utilisateurs une mauvaise expérience visuelle. est pratique Le chargement est nécessaire pour améliorer l'expérience utilisateur !

/*loading.js*/
// 加载HTML图
var _LoadingHtml = &#39;<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>&#39;;

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

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

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

Copier après la connexion