通过原生js判断网页图片是否已加载成功的方法总汇

在写网页的程序的时候,经常碰到要在网页加载完全之后再去展现页面，加载中的时候通过显示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://shenqiku.cn/article/FLY_18