?工作中遇到，需要加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（页面加载前）
原文地址：http://blog.51cto.com/bilibili/2140131