快捷導(dǎo)航

JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析

更新時(shí)間：2020年05月08日 10:29:36 作者：阿吉萊加雷

這篇文章主要介紹了JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

預(yù)加載基本概念：當(dāng)頁(yè)面打開(kāi)圖片提前加載，并且緩存在用戶本地，需要用到時(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)前圖片的原始寬度
    }

上面代碼中，圖片還沒(méi)加載完成打印圖片的寬度時(shí)，圖片寬度為0；只有等圖片加載完成后并寫入DOM樹(shù)渲染后，才去觸發(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è)圖片增加事件偵聽(tīng)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)換為阻塞式同步；

說(shuō)明：

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: