码迷,mamicode.com
首页 > Web开发 > 详细

ajax请求完成之前的loading加载效果

时间:2018-10-26 19:37:59      阅读:497      评论:0      收藏:0      [点我收藏+]

标签:transform   element   translate   htm   stat   state   mask   let   middle   

/*loading.js*/

// 加载HTML图
var _LoadingHtml = ‘<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><img src="./load.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);
  }
}
留作笔记,亲测可用~

ajax请求完成之前的loading加载效果

标签:transform   element   translate   htm   stat   state   mask   let   middle   

原文地址:https://www.cnblogs.com/xuniannian/p/9857979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!