Implementierung des Animationseffekts des Ladens, bevor die Ajax-Anfrage abgeschlossen ist

Dieser Artikel stellt Ihnen die Implementierung des Animationseffekts vor, bevor die Ajax-Anfrage abgeschlossen ist. Ich hoffe, dass er für Sie hilfreich ist.

Oft müssen wir Frameworks einführen, um Projekte zu entwickeln. Zu diesem Zeitpunkt kann es vorkommen, dass der Quellcode nicht geladen wird, bevor die Seite geladen wird, was zu einer schlechten visuellen Erfahrung führt ist bequem Das Laden ist erforderlich, um das Benutzererlebnis zu verbessern!

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

Empfohlene verwandte Artikel:

Eine kurze Diskussion über hohe Parallelität und verteilte Cluster im Knoten. js-Inhalt

So verwenden Sie PHP, um Komponenten zu finden, die importiert, aber nicht in Vue verwendet wurden

Das obige ist der detaillierte Inhalt vonImplementierung des Animationseffekts des Ladens, bevor die Ajax-Anfrage abgeschlossen ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!