原生JS判断页面中图片加载完成

自己写的判断页面中图片加载完成的方法，用原生JS完成，不用jq主要考虑在不加载jq的情况下，代码可以正常执行

判断指定ID的盒子中所有图片加载，demo代码如下：

<!DOCTYPE HTML>
<html> 
<head> 
<meta charset="utf-8">
<title>页面图片加载完成测试</title>
</head> 
<body>
<div id="loadingBox" style="display:none;">
    <img src="public/img/1.png" />
    <img src="public/img/2.png" />
    <img src="public/img/3.png" />
    <img src="public/img/4.png" />
    <img src="public/img/5.png" />
</div>


<script type="text/javascript">
//'loadingBox' => 存放 指定要加载的图片 的上级盒子 ID
getImgLoadEd('loadingBox',function(){
	alert('所有加载完成');
});
//判断 指定要加载的图片 是否加载完成
function getImgLoadEd(loadingBox,callback){
	//存放 指定要加载的图片 的盒子
	var imgAll   = document.getElementById(loadingBox);
	//指定要加载的图片 的数量
	var imgL     = imgAll.children.length;
	//指定要加载的图片 起始 key
	var imgStart = 0;
	//单张 指定要加载的图片 是否加载完成（如果没有，则定时器不断执行的方法IfLoadImg时，会在方法中有判断此变量布尔值，并提前中止不再住下做多余的执行 ， 直到此图片加载完成后才会往下执行，要加载图片的KEY才会+1）
	var isLoad   = false;
	//定时器执行的 加载图片 方法
	function IfLoadImg(){
		//所有图片加载完毕
		if(imgStart >= imgL){
			console.log('图片加载完成，图片总数量：' + imgStart);
			clearInterval(loadTimer);
			if(callback){
				callback();
			}
			return;
		}
		
		console.log('上张图片是否加载完成：' + isLoad);
		console.log('当前加载图片KEY：' + imgStart);
		
		//单张 指定要加载的图片 未加载完成时，不再往下执行
		if(!isLoad && imgStart != 0){
			return;
		//单张 指定要加载的图片 加载完成后，继续往下执行 1 次
		}else{
			isLoad = false
		}
		//根据 指定要加载的图片 的KEY 加载图片的方法
		loadImg(imgStart);
		function loadImg(imgKey){
			var curImg  = imgAll.children[imgKey].src;
			var loadImg = new Image();
			loadImg.src = curImg;
			loadImg.onload = function(){
				//单张 指定要加载的图片 加载完成后，设置KEY + 1，并设置是否加载成功的变量为true
				isLoad = true;
				imgStart++;
			}
		}
	}
	//定时器执行 指定要加载的 单张 图片  方法
	var loadTimer = setInterval(IfLoadImg,10);
}

</script>
</body>
</html>

给出要判断加载图片URL数组，根据每个URL加载图片，JS代码如下：

getImgLoadEd(function(){
	alert('所有加载完成');
});
function getImgLoadEd(callback){
	var imgAll = [
					'public/image/bg1.jpg',
					'public/image/bg2.jpg',
					'public/image/bg3.jpg',
					'public/image/bg4.jpg',
					'public/image/bg5.jpg',
					'public/image/bg6.jpg',
					'public/image/bg7.jpg',
					'public/image/bg8.jpg',
					'public/image/bg9.jpg',
					'public/image/bg10.jpg',
				];
	var imgL = imgAll.length;
	var imgStart = 0;
	var isLoad   = false;
	var bfb = 0;
	function IfLoadImg(){
		if(imgStart >= imgL){
			console.log('图片加载完成，图片总数量：' + imgStart);
			clearInterval(loadTimer);
			if(callback){
				callback();
			}
			return;
		}
		
		//console.log('上张图片是否加载完成：' + isLoad);
		//console.log('当前加载图片KEY：' + imgStart);
		
		if(!isLoad && imgStart != 0){
			return;
		}else{
			isLoad = false
		}
		loadImg(imgStart);
		function loadImg(imgKey){
			var curImg = imgAll[imgKey];
			var loadImg = new Image();
			loadImg.src = curImg;
			loadImg.onload = function(){
				isLoad = true;
				imgStart++;
				bfb = parseInt(imgStart / imgL * 100);
				console.log(bfb + '%');
				$('.page1_text').html(bfb + '%');
			}
		}
	}
	var loadTimer = setInterval(IfLoadImg,10);
}

原生JS判断页面中图片加载完成

猜你喜欢