loading加载的简单实现

in HTML/CSS/JS with 3828 comments

我们在使用ajax时候，为了提升用户体验，检查在ajax加载时使用loading,
当加载完成之后或者加载失败清除loading。
接下来我们实现一个简单的loading.

第一步，选择一个loading图标，也可以用CSS实现，我们这里使用图标。
推荐一个生成ajaxloading图标的网址：http://www.ajaxload.info/

第二步，我们要创建一个DIV区域，让这个图标居中，下面是CSS：

 .loading {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url('/static/assets/img/ajax-loader.gif')  50% 50% no-repeat rgba(249, 249, 249, 0.61);
 }

第三步，我们编写一个seloading和removeLoading的方法：

var setLoading = function(){
    var loading= document.createElement('div');
    loading.className = 'loading'
    document.body.appendChild(loading)
}

var removeLoading = function(){
     document.querySelector('.loading').remove()
}

使用方法：
【jquery】:

$.ajax({
   ....,
   beforeSend:function({  setLoading()  }),
   complete:function({  removeLoading()  }),
})

本文由 admin 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Aug 23, 2020 at 12:32 pm

← → ↓ ↑
Comments are closed.