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()  }),
})
Comments are closed.