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

原创

槑槑的嫑嫑 2018-07-11 09:15:47 博主文章分类：前端知识 ©著作权

文章标签 loading 加载前显示 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者槑槑的嫑嫑的原创作品，请联系作者获取转载授权，否则将追究法律责任

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