Wie kann der Ladeeffekt erreicht werden, bevor die Ajax-Anfrage abgeschlossen ist? (Codebeispiel)

Der Inhalt dieses Artikels besteht darin, vorzustellen, wie der Ladeeffekt erzielt werden kann, bevor die Ajax-Anfrage abgeschlossen ist. (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Oft müssen wir Frameworks einführen, um Projekte zu entwickeln. Zu diesem Zeitpunkt kann es vorkommen, dass der Quellcode nicht geladen wurde, bevor die Seite geladen wurde, was dem Benutzer ein schlechtes visuelles Erlebnis beschert Laden, um das Benutzererlebnis zu verbessern!

Codebeispiel:

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

Das obige ist der detaillierte Inhalt vonWie kann der Ladeeffekt erreicht werden, bevor die Ajax-Anfrage abgeschlossen ist? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!