溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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 loadImage("./img/"+i+".jpg");
}
}
let s=fn();
let value=s.next().value;
resume();
function resume(){
value.then(img=>{
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 loadImage(`./img/${i}-.jpg`).then(img=>{
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對象
看完上述內容，是不是對JS如何實現圖片預加載有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
