預加載原理：
瀏覽器如果存在多張地址一樣的圖片，只會發送一次請求；第二次直接從緩存中獲取；- 知道這個原理，我們就可以通過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；完美實現預加載