js: talk about those things before the page has finished loading (loading, multi-function load, mounted)

Here today, I share a few main modules:

Page finished loading before loading effects (real case)
How to determine whether the page is loaded js
js loaded and executed in vue function
and
Window.onload binding listener and processed to achieve a plurality of functions page load

Please come with me dwellers:

Js achieve page load is complete before loading effect

Man of few words said, the first on the code:

//获取浏览器页面可见高度和宽度
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 code in this section will <head>last can;
this code is actually nothing to say - to get the page width and height, in order to set the loading prompt box size, complete with custom content, its first show up, wait until readyState becomes and then removed from the DOM tree when complete.

The effect of loading pattern which can modify according to their own style, loading.gif this image needs to be on their own to find online.

JS determine whether the page is loaded

So far, it seems the most effective method is a method used in the above code - that is, the determination readyState document:

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

JS page load after completion of execution method

Talk about several methods commonly used:

window.onload=function(){}

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

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

Vue execution method after the page is loaded

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

Window.onload binding listener and processed to achieve a plurality of functions page load

It should be mentioned monitor an advantage: You can add or remove multiple handlers for the same event on an element. We said before the defect is loaded window.onload event only once in a page. Listener method used, can be monitored as a function window.onload plurality of, for example:

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()
      }
    }
  }
}

This function uses the if statement to determine the browser support for each listener and made a deal. If the listener is not supported, then the default method loaded window.onload.

Delicate clouds

He published 195 original articles · won praise 392 · views 60000 +

Private letter concerns