JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析
預(yù)加載基本概念:當(dāng)頁(yè)面打開圖片提前加載,并且緩存在用戶本地,需要用到時(shí)直接進(jìn)行渲染;在瀏覽圖片較多的網(wǎng)頁(yè)(百度圖庫(kù),淘寶京東等),可以有更好的用戶體驗(yàn);
一張圖片的預(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)前圖片的原始寬度
}
上面代碼中,圖片還沒加載完成打印圖片的寬度時(shí),圖片寬度為0;只有等圖片加載完成后并寫入DOM樹渲染后,才去觸發(fā)load事件的回調(diào)函數(shù),才能打印出圖片的寬度;
加載多張圖片時(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、給這個(gè)圖片增加事件偵聽load;
3、加載完成后,將加載進(jìn)來(lái)的圖片復(fù)制一個(gè)新的,放在數(shù)組中;
4、修改num;如果num的值大于100停止執(zhí)行,并且打印數(shù)組;
5、給這個(gè)圖片的地址賦予一個(gè)新地址,因?yàn)楦淖儓D片的地址就會(huì)重新觸發(fā)load,所以會(huì)繼續(xù)進(jìn)入loadHandler函數(shù),不斷加載,直到加載完成。
第二種:生成器函數(shù)實(shí)現(xiàn)預(yù)加載
function loadImage(src){
return new Promise(function(resolve,reject){
let img=new Image();
img.onload=function(){
resolve(img);//加載時(shí)執(zhí)行resolve函數(shù)
}
img.onerror=function(){
reject(src+'這個(gè)地址錯(cuò)誤');//拋出異常時(shí)執(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(){//加載時(shí)執(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 這個(gè)函數(shù)使用async 表示這個(gè)函數(shù)是一個(gè)異步函數(shù)
2、這個(gè)函數(shù)中就可以使用await ,await作用就是讓異步變?yōu)橥降却?,異步變成了阻塞式等?br />
3、當(dāng)異步全部完成時(shí),再繼續(xù)向后運(yùn)行
4、async函數(shù)中的await后面只能跟的時(shí)Promise對(duì)象
5、async函數(shù)執(zhí)行后返回的是一個(gè)Promise對(duì)象
以上就是三種預(yù)加載的方法,僅供參考;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript實(shí)現(xiàn)漢字和拼音互轉(zhuǎn)的終極方案
網(wǎng)上關(guān)于JS實(shí)現(xiàn)漢字和拼音互轉(zhuǎn)的文章很多,但是比較雜亂,有的不支持多音字、不支持聲調(diào)或者字典文件太大,無(wú)法根據(jù)實(shí)際需要滿足需求。這篇文章給大家修正整理網(wǎng)上的幾種常見方法,文章結(jié)尾還附簡(jiǎn)單的JS拼音輸入法,本文對(duì)大家具有一定的參考借鑒價(jià)值,下面一起看看吧。2016-10-10
Javascript使用SWFUpload進(jìn)行多文件上傳
本篇文章主要解釋了使用SWFUpload進(jìn)行多文件上傳,這里整理了詳細(xì)的代碼,有需要的可以了解一下。2016-11-11
showModalDialog在谷歌瀏覽器下會(huì)返回Null的解決方法
showModalDialog的返回值在IE、火狐下面都能夠獲取返回值,但是在谷歌瀏覽器下面會(huì)返回Null,下面有個(gè)不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-11-11
JScript中使用ADODB.Stream判斷文件編碼的代碼
在實(shí)現(xiàn)TextStraem的時(shí)候,找到判斷文件編碼的代碼是VBS的,但是在JScript中是沒有ASC等函數(shù)的,也不能對(duì)二進(jìn)制數(shù)據(jù)進(jìn)行處理,因此需要通過一個(gè)特別的方法來(lái)獲取文件開關(guān)的編碼標(biāo)識(shí)。2008-06-06
javascript來(lái)定義類的規(guī)范小結(jié)
javascript來(lái)定義類的規(guī)范,有利于代碼的可閱讀性。2010-11-11
詳解Webpack抽離第三方類庫(kù)以及common解決方案
這篇文章主要介紹了詳解Webpack抽離第三方類庫(kù)以及common解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03

