工作中遇到,需要加loading。1、用jquery的load方法读取页面,页面读取完成前显示loading。2、首页js等加载过慢,页面加载完成前显示loading。
(1).jquery .load()方法,load完成前显示loading
<!--main_loading的html-->
<div id="main_loading" >
<div id="loading_gif" >
<div class="sk-spinner sk-spinner-cube-grid">
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
<div class="sk-cube"></div>
</div>
</div>
</div>
<!--js,点击后显示div,加载完成隐藏-->
$("#menu1").click(function(){
$('#main_loading').show();
$('#main-page').load('page_a.html',function () {
$('#main_loading').hide();
});
})
2、首页页面加载完成前显示loading
<!--main_loading默认显示-->
// 首页加载时loading
document.onreadystatechange = completeLoading;
// 加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState =="complete") {
document.getElementById('main_loading').style.display="none";
}
else{
document.getElementById('main_loading').style.display="block";
}
}