首頁  >  文章  >  web前端  >  js實作圖片預加載

js實作圖片預加載

王林
王林轉載
2020-05-17 09:21:233665瀏覽

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入門教學

#

以上是js實作圖片預加載的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除