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
<🎜. >

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 Exécuter la fonction générateur et exécuter la fonction loadImage une fois ;

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

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 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!