js：说说页面加载完之前那些事（loading、多函数加载、mounted）

今天在这里，笔者主要分享几个模块：

页面加载完毕之前loading效果（实际案例）
js如何判断页面是否加载完毕
js及vue中加载完毕执行函数
以及
结合监听器和window.onload实现页面加载完处理多个函数

请诸君随我而来：

js实现的页面加载完毕之前的loading效果

话不多说，先上代码：

//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
	_PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为216px，高度为61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
	_LoadingLeft = _PageWidth > 216 ? (_PageWidth - 216) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:100000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(\'../loading.gif\') no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面(主要是图片资源)加载中，请诸位稍等...</div></div>';
//呈现loading效果
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
	if (document.readyState == "complete") {
		var loadingMask = document.getElementById('loadingDiv');
		loadingMask.parentNode.removeChild(loadingMask);
	}
}

将此段js代码放入<head>最后即可；
这段代码倒是没啥说的 —— 先获取页面宽高，以此设置loading提示框大小，完成自定义内容，先将其展现出来，等到readyState变为complete时再将其从DOM树中移除。

其中loading效果的样式可以根据自己的风格修改，loading.gif这个图片需要可自行网上找。

JS判断页面是否加载完毕

目前为止，貌似最有效的方法，也是上面代码中所用的一种方法——就是判断document的readyState：

document.onreadystatechange=function(){
	if(document.readyState==='complete'){
		//...
	}
}

JS页面加载完毕后执行方法

说说常用的几种方法：

window.onload=function(){}

if('addEventListener' in document){
	document.addEventListener('DOMContentLoaded',function(){
		//...
	},false);
}

document.onreadystatechange=function(){
	if(document.readyState==='complete'){
		//...
	}
}

Vue中页面加载完毕后执行方法

mounted(){
	this.$nextTick(()=>{
		//确保dom异步加载完毕
	});
}

结合监听器和window.onload实现页面加载完处理多个函数

这里需要提到监视器一个优势：可以为一个元素上的同一个事件添加或者去除多个处理函数。前面说过window.onload事件加载的缺陷是只能在页面使用一次。而使用监听器的方法，就可以监听为window.onload的多个函数，例如：

function addLoadListener(fn){
  if(typeof window.addEventListener != 'undefined'){
    window.addEventListener('load',fn,false)
  }else if(typeof document.addEventListener){
    document.addEventListener('load',fn,false)
  }else if(typeof window.attachEvent != 'undefined'){
    window.attachEvent('load',fn）
  }else{
    var oldfn = window.onload
    if(typeof window.onload != 'function'){
      window.onload = fn
    }else{
      window.onload = function(){
          oldfn()
          fn()
      }
    }
  }
}

这个函数使用if语句判断了浏览器对监听器的支持情况并且分别做了处理。如果不支持监听器，那么就使用默认的window.onload方法加载。

云风清

发布了195 篇原创文章 · 获赞 392 · 访问量 6万+

私信关注