免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Javascript如何實現(xiàn)圖片預(yù)加載?-創(chuàng)新互聯(lián)

今天小編就為大家?guī)硪黄嘘P(guān)Javascript實現(xiàn)圖片預(yù)加載的文章。小編覺得挺實用的,為此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站于2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目網(wǎng)站建設(shè)、成都做網(wǎng)站網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元蓬萊做網(wǎng)站,已為上家服務(wù),為蓬萊各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

什么是預(yù)加載:

當(dāng)頁面打開圖片提前加載,并且緩存在用戶本地,需要用到時直接進(jìn)行渲染;在瀏覽圖片較多的網(wǎng)頁(百度圖庫,淘寶京東等),可以有更好的用戶體驗;

一張圖片的預(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)前圖片的原始寬度
    }

上面代碼中,圖片還沒加載完成打印圖片的寬度時,圖片寬度為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="./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、給這個圖片增加事件偵聽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ù)向后運行

4、async函數(shù)中的await后面只能跟的時Promise對象

5、async函數(shù)執(zhí)行后返回的是一個Promise對象

以上就是Javascript實現(xiàn)圖片預(yù)加載的具體操作,代碼詳細(xì)清楚,如果在日常工作遇到這個問題,希望你能通過這篇文章解決問題。如果想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

當(dāng)前名稱:Javascript如何實現(xiàn)圖片預(yù)加載?-創(chuàng)新互聯(lián)
網(wǎng)站鏈接:http://m.newbst.com/article48/hsgep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、微信公眾號自適應(yīng)網(wǎng)站、Google、標(biāo)簽優(yōu)化企業(yè)網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)