Home > Web Front-end > JS Tutorial > body text

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

不言
Release: 2018-08-02 11:58:31
Original
3776 people have browsed it

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);
    }
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!