js pour implémenter le préchargement des images

Qu'est-ce que le préchargement :

Lorsque la page s'ouvre, les images sont chargées à l'avance et mises en cache localement par l'utilisateur. Elles sont rendues directement en cas de besoin ; des pages Web d'images (Baidu Gallery, Taobao JD.com, etc.) peuvent avoir une meilleure expérience utilisateur

Préchargement d'une image

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

Dans le code ci-dessus, l'image n'a pas été n'est pas encore chargée et la largeur de l'image imprimée est Lorsque, la largeur de l'image est 0 ; ce n'est qu'une fois l'image chargée et écrite dans l'arborescence DOM pour le rendu que la fonction de rappel de l'événement de chargement peut être déclenchée pour imprimer la largeur de l'image. image;

Lors du chargement de plusieurs images, vous devez effectuer une mise en cache locale à l'avance, voici trois exemples de préchargement de plusieurs images :

Le premier : charger le préchargement

Charger 100 images , et le nom de l'image est 1.jpg ~100.jpg (le même ci-dessous) ;

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

Le code ci-dessus signifie :

1. 🎜>2. Ajoutez une détection d'événement à cette image Écoutez pour charger

3. Une fois le chargement terminé, copiez l'image chargée dans une nouvelle et placez-la dans le tableau

4. Modifier num; if num Si la valeur est supérieure à 100, l'exécution s'arrêtera et le tableau sera imprimé

5. , car changer l'adresse de l'image redéclenchera le chargement, il continuera donc à entrer dans la fonction loadHandler, chargeant en continu jusqu'à ce que le chargement soit terminé.

Deuxième type : la fonction générateur implémente le préchargement

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

Le code ci-dessus signifie :

1 Exécuter la fonction générateur et exécuter la fonction loadImage une fois ;

2. Créez l'image dans Promise ;

3. Déterminez si l'image peut être chargée et exécutez la fonction de rappel Promise si le chargement est réussi

4. reprendre la fonction une fois, et La fonction exécute la fonction Promise dans l'état résolu

5. Exécutez à plusieurs reprises s.next().value jusqu'à ce que toutes les images soient chargées

La troisième méthode : async ; /await précharge les images

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

Cette méthode est une méthode ES6 qui utilise async et wait pour convertir l'asynchrone en synchronisation bloquante

Explication :

1. pour représenter cela La fonction est une fonction asynchrone

2 Vous pouvez utiliser wait dans cette fonction. La fonction de wait est de transformer l'asynchrone en attente synchrone et l'asynchrone en attente bloquante

3. Lorsque toutes les opérations asynchrones sont terminées, continuez à exécuter en arrière

4. L'attente dans la fonction asynchrone ne peut être suivie que par l'objet Promise

5. fonction asynchrone Ce qui est renvoyé après l'exécution est un objet Promise

Tutoriel recommandé :

Tutoriel d'introduction js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!