js加載前顯示loading(頁(yè)面加載前)
標(biāo)簽:
JavaScript
工作中遇到,需要加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"; } }
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦