這篇文章主要講解了JS如何實現(xiàn)圖片預(yù)加載，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供清流網(wǎng)站建設(shè)、清流做網(wǎng)站、清流網(wǎng)站設(shè)計、清流網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、清流企業(yè)網(wǎng)站模板建站服務(wù)，十余年清流做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
預(yù)加載基本概念：當(dāng)頁面打開圖片提前加載，并且緩存在用戶本地，需要用到時直接進(jìn)行渲染；在瀏覽圖片較多的網(wǎng)頁（百度圖庫，淘寶京東等），可以有更好的用戶體驗；
一張圖片的預(yù)加載
重慶分公司
重慶分公司
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);//當(dāng)前圖片的原始寬度
}上面代碼中，圖片還沒加載完成打印圖片的寬度時，圖片寬度為0；只有等圖片加載完成后并寫入DOM樹渲染后，才去觸發(fā)load事件的回調(diào)函數(shù)，才能打印出圖片的寬度；
加載多張圖片時，要提前在本地進(jìn)行緩存，下面要講三種預(yù)加載多張圖片的例子：
第一種：load預(yù)加載
加載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());//復(fù)制當(dāng)前圖片元素
num++;
if(num>100){console.log(list);return;}
this.src="./img/"+num+".jpg"; //修改地址繼續(xù)后觸發(fā)load事件
}上面代碼表示：
1、創(chuàng)建一張圖片；
2、給這個圖片增加事件偵聽load；
3、加載完成后,將加載進(jìn)來的圖片復(fù)制一個新的,放在數(shù)組中；
4、修改num；如果num的值大于100停止執(zhí)行，并且打印數(shù)組；
5、給這個圖片的地址賦予一個新地址,因為改變圖片的地址就會重新觸發(fā)load，所以會繼續(xù)進(jìn)入loadHandler函數(shù),不斷加載,直到加載完成。
第二種：生成器函數(shù)實現(xiàn)預(yù)加載
function loadImage(src){
return new Promise(function(resolve,reject){
let img=new Image();
img.onload=function(){
resolve(img);//加載時執(zhí)行resolve函數(shù)
}
img.onerror=function(){
reject(src+'這個地址錯誤');//拋出異常時執(zhí)行reject函數(shù)
}
img.src=src;
})
}
function* fn(){
for(let i=1;i<100;i++){
yield loadImage("./img/"+i+".jpg");
}
}
let s=fn();
let value=s.next().value;
resume();
function resume(){
value.then(img=>{
console.log(img);//打印加載的圖片標(biāo)簽
value=s.next().value;
if(value)resume();
});
}以上代碼表示：
1、執(zhí)行生成器函數(shù)并且一次執(zhí)行l(wèi)oadImage 函數(shù)；
2、在Promise中創(chuàng)建圖片；
3、判斷圖片是否可以加載，加載成功執(zhí)行Promise的回調(diào)函數(shù)resolve；
4、執(zhí)行一次resume函數(shù)，并在函數(shù)里面執(zhí)行Promise在resolved狀態(tài)下的函數(shù)
5、反復(fù)執(zhí)行s.next().value，直到全部圖片加載完成；
第三種：async/await預(yù)加載圖片
function loadImage(src){
let p=new Promise(function(resolve,reject){
let img=new Image();
img.onload=function(){//加載時執(zhí)行resolve函數(shù)
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 loadImage(`./img/${i}-.jpg`).then(img=>{
arr.push(img);
});
}
return arr;
}
fn().then(list=>{
console.log(list);//打印圖片數(shù)組
})這種方法是ES6的方法用到了async和await將異步轉(zhuǎn)換為阻塞式同步；
說明：
1、fn 這個函數(shù)使用async 表示這個函數(shù)是一個異步函數(shù)
2、這個函數(shù)中就可以使用await ，await作用就是讓異步變?yōu)橥降却?，異步變成了阻塞式等?/p>
3、當(dāng)異步全部完成時，再繼續(xù)向后運行
4、async函數(shù)中的await后面只能跟的時Promise對象
5、async函數(shù)執(zhí)行后返回的是一個Promise對象
看完上述內(nèi)容，是不是對JS如何實現(xiàn)圖片預(yù)加載有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
