Implementation of the animation effect of loading before the ajax request is completed

This article introduces to you the implementation of the animation effect of loading before the ajax request is completed. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Many times we need to introduce frameworks to develop projects. At this time, we may encounter the problem that the source code has not been loaded before the page is loaded, giving the user a bad visual experience. This is convenient. Loading is required to improve the user experience!

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

Recommended related articles:

A brief discussion on high concurrency and distributed clusters in node.js Content

How to use php to find components that have been imported but not used in vue

The above is the detailed content of Implementation of the animation effect of loading before the ajax request is completed. For more information, please follow other related articles on the PHP Chinese website!