JS圖片預加載三種實現方法解析

預加載基本概念：當頁面打開圖片提前加載，並且緩存在用戶本地，需要用到時直接進行渲染；在瀏覽圖片較多的網頁（百度圖庫，淘寶京東等），可以有更好的用戶體驗；
一張圖片的預加載
var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/1.jpg"; document.body.appendChild(img); console.log(img.width)； function loadHandler(e){ console.log(img.width);//當前圖片的原始寬度 }
上面代碼中，圖片還沒加載完成打印圖片的寬度時，圖片寬度為0；只有等圖片加載完成後並寫入DOM樹渲染後，才去觸發load事件的回調函數，才能打印出圖片的寬度；
加載多張圖片時，要提前在本地進行緩存，下面要講三種預加載多張圖片的例子：
第一種：load預加載
加載100張圖片，且圖片名為1.jpg~100.jpg（下同）；
var num=1; var list=[]; loadImage(); function loadImage(){ var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/"+num+".jpg"; } function loadHandler(e){ list.push(this.cloneNode());//複製當前圖片元素 num++; if(num>100){console.log(list);return;} this.src="./img/"+num+".jpg"; //修改地址繼續後觸發load事件 }
上面代碼表示：
1、創建一張圖片；
2、給這個圖片增加事件偵聽load；
3、加載完成後,將加載進來的圖片複製一個新的,放在數組中；
4、修改num；如果num的值大於100停止執行，並且打印數組；
5、給這個圖片的地址賦予一個新地址,因為改變圖片的地址就會重新觸發load，所以會繼續進入loadHandler函數,不斷加載,直到加載完成。
第二種：生成器函數實現預加載
function loadImage(src){ return new Promise(function(resolve,reject){ let img=new Image(); img.onload=function(){ resolve(img);//加載時執行resolve函數 } img.onerror=function(){ reject(src+'這個地址錯誤');//拋出異常時執行reject函數 } img.src=src; }) } function* fn(){ for(let i=1;i<100;i++){ yield="" let="" s="fn();" value="s.next().value;" function="">{ console.log(img);//打印加載的圖片標籤 value=s.next().value; if(value)resume(); }); }
以上代碼表示：
1、執行生成器函數並且一次執行loadImage 函數；
2、在Promise中創建圖片；
3、判斷圖片是否可以加載，加載成功執行Promise的回調函數resolve；
4、執行一次resume函數，並在函數裡面執行Promise在resolved狀態下的函數
5、反覆執行s.next().value，直到全部圖片加載完成；
第三種：async/await預加載圖片
function loadImage(src){ let p=new Promise(function(resolve,reject){ let img=new Image(); img.onload=function(){//加載時執行resolve函數 resolve(img); } img.onerror=function(){ reject(src); } img.src=src; }) return p; } async function fn(){ let arr=[]; for(let i=3;i<80;i++){ await="">{ arr.push(img); }); } return arr; } fn().then(list=>{ console.log(list);//打印圖片數組 })
這種方法是ES6的方法用到了async和await將異步轉換為阻塞式同步；
說明：
1、fn 這個函數使用async 表示這個函數是一個異步函數
2、這個函數中就可以使用await ，await作用就是讓異步變為同步等待，異步變成了阻塞式等待
3、當異步全部完成時，再繼續向後運行
4、async函數中的await後面只能跟的時Promise對象
5、async函數執行後返回的是一個Promise對象
以上就是三種預加載的方法，僅供參考；