js：说说页面加载完之前那些事（loading多函数加载mounted）
Posted 恪愚
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>';
document.title="Loading content...";
//呈现loading效果
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading()
if (document.readyState == "complete")
document.title="! 这里写你原本的标题";
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方法加载。
以上是关于js：说说页面加载完之前那些事（loading多函数加载mounted）的主要内容，如果未能解决你的问题，请参考以下文章