JS圖片預(yù)加載三種實現(xiàn)方法解析
預(yù)加載基本概念:當(dāng)頁面打開圖片提前加載,并且緩存在用戶本地,需要用到時直接進(jìn)行渲染;在瀏覽圖片較多的網(wǎng)頁(百度圖庫,淘寶京東等),可以有更好的用戶體驗;
一張圖片的預(yù)加載
var img=new Image(); img.addEventListener('load',loadHandler); img.src='http://www.hdgsjgj.cn/bcjs/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='http://www.hdgsjgj.cn/bcjs/img/'+num+'.jpg'; } function loadHandler(e){ list.push(this.cloneNode());//復(fù)制當(dāng)前圖片元素 num++; if(num>100){console.log(list);return;} this.src='http://www.hdgsjgj.cn/bcjs/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ù)向后運(yùn)行
4、async函數(shù)中的await后面只能跟的時Promise對象
5、async函數(shù)執(zhí)行后返回的是一個Promise對象
以上就是三種預(yù)加載的方法,僅供參考;
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 存儲于xml中需要的HTML轉(zhuǎn)義代碼2. python 浮點數(shù)四舍五入需要注意的地方3. Java GZip 基于內(nèi)存實現(xiàn)壓縮和解壓的方法4. python開發(fā)一款翻譯工具5. 利用CSS制作3D動畫6. jsp+servlet簡單實現(xiàn)上傳文件功能(保存目錄改進(jìn))7. Springboot 全局日期格式化處理的實現(xiàn)8. 完美解決vue 中多個echarts圖表自適應(yīng)的問題9. SpringBoot+TestNG單元測試的實現(xiàn)10. PHP實現(xiàn)簡單線性回歸之?dāng)?shù)學(xué)庫的重要性
