js, um das Vorladen von Bildern zu implementieren

Was ist das Vorladen?

Beim Öffnen der Seite werden Bilder vorab geladen und vom Benutzer lokal zwischengespeichert. Sie werden bei häufigem Surfen direkt gerendert von Bildern Webseiten (Baidu Gallery, Taobao JD.com usw.) können eine bessere Benutzererfahrung haben;

Vorladen eines Bildes

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);//当前图片的原始宽度
    }

Im obigen Code wurde das Bild nicht angezeigt noch geladen und die Breite des gedruckten Bildes ist Wenn die Bildbreite 0 ist; erst nachdem das Bild geladen und zum Rendern in den DOM-Baum geschrieben wurde, kann die Rückruffunktion des Ladeereignisses ausgelöst werden, um die Breite des Bildes auszudrucken Bild;

Wenn Sie mehrere Bilder laden, müssen Sie vorab lokal zwischenspeichern. Hier sind drei Beispiele für das Vorladen mehrerer Bilder:

Das erste: Vorladen laden

Laden Sie 100 Bilder , und der Bildname ist 1.jpg ~100.jpg (derselbe unten);

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事件
    }

Der obige Code bedeutet:

1 🎜>2. Fügen Sie die Ereigniserkennung zu diesem Bild hinzu.

3. Kopieren Sie das geladene Bild in ein neues und fügen Sie es in das Array ein >
4. Ändern Sie die Nummer. Wenn der Wert größer als 100 ist, wird die Ausführung gestoppt und das Array wird gedruckt.

5 Da das Ändern der Adresse des Bildes das Laden erneut auslöst, wird die LoadHandler-Funktion weiterhin aufgerufen und kontinuierlich geladen, bis der Ladevorgang abgeschlossen ist.

Zweiter Typ: Generatorfunktion implementiert das Vorladen

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();
    });
  }

Der obige Code bedeutet:

1. Führen Sie die Generatorfunktion und die LoadImage-Funktion einmal aus;

2. Erstellen Sie das Bild in Promise; stellen Sie fest, ob das Bild geladen werden kann, und führen Sie die Funktion „Resolve“ aus Funktion einmal fortsetzen, und die Funktion führt die Funktion von Promise im aufgelösten Zustand aus

5. Führen Sie s.next().value wiederholt aus, bis alle Bilder geladen sind.

Die dritte Methode: asynchron /await lädt Bilder vor

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);//打印图片数组
  })

Diese Methode ist eine ES6-Methode, die asynchrone in blockierende Synchronisation umwandelt

Erklärung:

1 um dies darzustellen Die Funktion ist eine asynchrone Funktion

2 Sie können „await“ in dieser Funktion verwenden. Die Funktion „await“ besteht darin, asynchrones in synchrones Warten und asynchrones in blockierendes Warten umzuwandeln

3. Wenn alle asynchronen Vorgänge abgeschlossen sind, laufen Sie weiter rückwärts

4. Auf das Warten in der asynchronen Funktion kann nur das Promise-Objekt folgen

5. Asynchrone Funktion Was nach der Ausführung zurückgegeben wird, ist ein Promise-Objekt

Empfohlenes Tutorial:

JS-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonjs, um das Vorladen von Bildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!