loading加载的简单实现
我们在使用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() }),
})
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭