js加载前显示loading（页面加载前）

 工作中遇到，需要加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"; } }