预加载原理：
浏览器如果存在多张地址一样的图片，只会发送一次请求；第二次直接从缓存中获取；- 知道这个原理，我们就可以通过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>
后记
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；完美实现预加载
