js加載前顯示loading（頁面加載前）
阿新 • • 發佈：2018-07-11
ech let jquer html query opacity else pre fixed
工作中遇到，需要加loading。1、用jquery的load方法讀取頁面，頁面讀取完成前顯示loading。2、首頁js等加載過慢，頁面加載完成前顯示loading。
(1).jquery .load()方法，load完成前顯示loading
<!--main_loading的html-->
<div id="main_loading" style="display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:#f8f8f8;opacity:0.6;z-index:1000;">
<div id="loading_gif" style="text-align:center;position:fixed;z-index: 9999;top:50%;left: 50%;">
<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";
}
}js加載前顯示loading（頁面加載前）