是什么？
瀏覽器會緩存靜態資源（hmtl/css/img等）。圖片預加載就是讓瀏覽器提前緩存圖片，提升用戶體驗。
瀏覽器什么情況下會下載圖片？
1，解析到html中img的src屬性的時候
2，解析到background-image屬性的url()的時候
3，在js中創建Image對象的之后給他的src屬性賦上一個url之后瀏覽器就會發出請求。html中的img標簽本質就是Image對象。html中每出現一個img標簽，就有一個Image對象被創建。
1 // html 2 <img src="https://www.xxx.com/static/img/xxx.png" alt=""> 3 // css 4 background:url('./src/static/images/goods1.png') 5 // js 在js中創建Image對象后給它賦上src屬性的時候瀏覽器也會下載src指向的資源。 6 new Image().src = "https://www.xxx.com/static/img/xxx.png"
在哪里個階段使用預加載？
反思：瀏覽器拿到一個HTML的時候第一件事情就是創建document對象然后解析HTML標簽生成DOM樹，當他解析到img標簽的src屬性的時候會立即向src指向的地址發出請求。這就代表我們定義在一個頁面當中的img在頁面初始的時候原本就會被統統下載。那我們為什么還要去自己下載這些圖片？
結論：在index.html下載其他頁面中需要用到的圖片。
什么場景需要使用預加載？
像xx公司官方網站，這種展示類的頁面中一般會有用於展示實力的比較大的輪播圖和背景圖。把這些圖片提前下載下來，就能避免頁面打開半天都是白茫茫的一片。
實現方式
實現預加載要做的只有一件事情，那就是在用到圖片之前讓瀏覽器提前緩存圖片。
通過html：在index頁面末尾定義多個img標簽，達到提前下載的目的。
1 // 批量定義要下載的圖片資源，定義display 阻止他們渲染到頁面
<img src="xxx.xxx.xxx/static/img/xx1.xxx" style="display: none"> 2 <img src="xxx.xxx.xxx/static/img/xx2.xxx" style="display: none"> 3 <img src="xxx.xxx.xxx/static/img/xx3.xxx" style="display: none">
通過css：在css文件中通過background-image屬性批量下載圖片
<div id="preload" style="display:none"></div> #preload{
// url中的圖片會依次次請求過來。 background:url('./src/static/images/goods1.png'); background:url('./src/static/images/goods2.png'); background:url('./src/static/images/goods3.png'); }
通過js：批量創建Image對象，為它們的src屬性賦上我們需要下載的圖片URL
// 需要下載的URL列表
var imgList = ['./src/static/images/goods1.png'];
loadImg(imgList);
function loadImg(imgList){
imgList.map(function(imgSrc,index){
var img = new Image();
// 記錄自己是第幾個下載的圖片
img.num = index+1;
console.log(img.num);
// 綁定加載完成事件處理函數
img.addEventListener("load",loadHandler);
// 這里為img指定src之后瀏覽器就會發出請求
img.src = imgSrc;
})
}
function loadHandler(e){
/*這里可以通過this拿到加載好的圖片對象，可以對它為所欲為。*/
// 注銷事件，釋放內存。
this.removeEventListener("load",loadHandler);
// 判斷是不是最后一個要加載的圖片
if(this.num === imgList.length)console.log("加載完成！");
}
小結：
圖片預加載的本質：讓瀏覽器提前緩存之后要用到的圖片。
好處：增強用戶體驗。
壞處：不管用不用的上都會吃用戶流量，密集的下載會對服務器造成一定壓力。