js多图片预加载，并显示进度_浏览器同时加载两张相同图片会发送两个请求吗-优快云博客

本文链接：https://blog.youkuaiyun.com/jayLog/article/details/103459256

预加载原理：

浏览器如果存在多张地址一样的图片，只会发送一次请求；第二次直接从缓存中获取；
知道这个原理，我们就可以通过js的onload函数知道图片加载完成；

现在有这样的需求:
要求页面全部图片全部隐藏，当图片全部加载完毕之后再让图片显示，并且控制台显示进度

– 2019-12-12

onload 后面必须跟匿名函数，否则触发的不是onload函数，无法实现预加载动作

代码实现如下：

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<div style="display: none;">
		<img src="img/=.png" />
		<img src="img/arrow.png" />
		<img src="img/bg.png" />
		<img src="img/bgm-off.png" />
		<img src="img/cha.png" />/
		<img src="img/you.png" />/
		<img src="img/liang.png" />/
		<img src="img/p2-car.png" />/
		</div>
		
		<script>//获取页面上的所有图片
			var imgs = document.getElementsByTagName('img');
			let num = imgs.length;
			loading = 0;
			for(let i=0;i<num;i++){
				let imgs = new Image(); //这是重点，必须new一张，如果直接用onload，在你还没执行到这段函数的时候，可能已经加载了一两个图片了，这时候就会出现加载不到100%！！！
				imgs.src=  allImgs[i].src;
				imgs.onload =function(){add()};//必须用匿名函数，否则加载的函数不是load函数
			}			
			function add(){
				console.dir(loading/num*100+'%');
				if(loading==num-1){//如果是最后一张图片了就让数值变为1，让所有图片显示
					loading=num;
					console.dir(loading/num*100+'%');
					document.getElementsByTagName('div')[0].style.display="block";
				}
				loading++;				
			}
		
		</script>
	</body>
</html>

1575877341(1).jpg

后记

1.onload 后面必须跟匿名函数，否则触发的不是onload函数
2.我可以简单的直接在获取到图片后直接用onload函数，实现预加载，如下

var imgs = document.getElementsByTagName('img');
for(let i=0;i<num;i++){  
imgs[i].onload =function(){loadedimg++；}
}

但是我为什么还要new一个呢，原因在于，页面代码从上往下执行，js代码在后面，执行到js代码前，或许已经加载了一两张图片，而这个时候你的onload就触发不了了，

因此需要new出一张新的图片，然后给图片加onload函数，如果前面有的图片已经加载完成了，也没关系，新的图片会直接触发onload，而没加载进来的则加载完后照常执行onload；完美实现预加载