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

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);
    }
}

Articles connexes recommandés :

Une brève discussion sur la simultanéité élevée et la distribution dans Node .js Contenu du cluster

Comment utiliser php pour rechercher des composants importés mais non utilisés dans vue

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!