html页面加载前判断,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 = '

页面(主要是图片资源)加载中，请诸位稍等...

';

//呈现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代码放入

最后即可；

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

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

JS判断页面是否加载完毕

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

document.onreadystatechange=function(){

if(document.readyState==='complete'){

//...

}

}

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

说说常用的几种方法：

window.οnlοad=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万+

私信

关注

标签：onload,loading,加载,js,window,document,页面

来源： https://blog.csdn.net/qq_43624878/article/details/104085464