在写网页的程序的时候,经常碰到要在网页加载完全之后再去展现页面，加载中的时候通过显示loading...的样式。这时候我们会直接想到使用window.onload的方式,或者是通过图片的img对象（dom）的complete属性,这在一定程度可以解决。

window.onload方式  

<script> 
        document.getElementById('imgid').onload = function() { 
            console.log('loaded') 
        } 
</script>

img的complete属性 

function imgLoad(img, callback) {
	if(img==undefined){
		return;
	}
	var timer = setInterval(function() {
		if(img.complete) {
			callback(img)
			clearInterval(timer)
		}
	}, 50)
}
imgLoad(document.getElementById('imgid'),()=>{console.log('加载完毕')})

判断页面图片是都完全加载 

function imgloads(callback,size){//判断图片是否已加载完毕
	var imgs=document.getElementsByTagName("img");
	var isover=false;//true加载完毕，false还有未加载的
	var add=0;//循环当前次数
	var size=size || 10;//循环次数
	var jdtime=setInterval(function(){
		isover=true;add++;
		for(var i=0;i<imgs.length;i++){
			if(!imgs[i].complete){//还有没加载的图片
				isover=false;
			}
		}
		if(isover || add>=size){//加载完成，or超时
			clearInterval(jdtime);
			console.log("图片加载完成！用时"+add*50+'毫秒');
			callback();
		}
	},50);
},

完结~~~~~

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/18