JavaScript zum Implementieren des Vorladens und verzögerten Ladens von Bildern

//Hier habe ich die Anzahl der Bilder geschrieben, und der Bildname muss aus arabischen Ziffern mit der Endung jpg bestehen
//Der folgende Kommentar stellt eine weitere Methode vor. Wählen Sie einfach eine davon aus. Natürlich können Sie Ihre Methode auch im Kommentarbereich hinterlassen, um sie gemeinsam zu lernen. function preload() {
  für(var i=1;i<13;i++){
    var img=[];
    img[i]=new Image(); //Erstelle ein img-Objekt img[i].src="img/"+i+".jpg"
  }
}
/*Funktion Vorladen() {
    img1=new Image(); //Erstelle ein img-Objekt img1.src="xxx/xxx/xxx.jpg" //Bildadresse img2=new Image();
    img2.src="xxx/xxx/xxx.jpg"
    img3=neues Bild();
    img3.src="xxx/xxx/xxx.jpg"
    img4=neues Bild();
    img4.src="xxx/xxx/xxx.jpg"
    ......
  }
}*/

// Definiert eine Funktion mit einem Parameter fun
Funktion addLoadEvent(Spaß) {
  // Weisen Sie der Variablen oldnload die geladene Funktion zu. var oldonload = window.onload;
  wenn (Typ von Fenster.beim Laden != 'Funktion') {
    window.onload = Spaß;
  } anders {
    fenster.onload = funktion() {
      //Hier wird die Funktion oldonload() ausgeführt, die gerade die Variable zugewiesen hat;
      // Hier wird der übergebene Funktionsparameter fun() ausgeführt;
    }
  }
}
Fügt einen Ereignistyp hinzu, der die Ereignisse enthält, die Sie ausführen möchten.
/*
 oldonload ist eine selbstdefinierte Variable, der das Ereignis onload zugewiesen wird. Das Ereignis onload tritt unmittelbar nach dem Laden der Seite oder des Bildes ein.
 onload ist ein Ereignis, das ausgeführt wird, nachdem die Seite und das Bild geladen wurden. Wenn onload jedoch in der Praxis mehrfach zugewiesen wird, wird onload durch die später kopierte Methode überschrieben, was bedeutet, dass onload nur die zuletzt zugewiesene Methode ausführt.
 fun() ist der übergebene Parameter, hier ist fun() preload().
Dieser Code bedeutet:
  Wenn (typeof window.onload != 'function'), d. h. window.onload wurde kein Wert zugewiesen, wird es direkt fun zugewiesen.
  Andernfalls bedeutet es, dass ein Programm ihm zuerst einen Wert zugewiesen hat. Dann sollte nach dem Laden der Seite zuerst die vorhandene Funktion ausgeführt werden und dann Ihr neuer Spaß.
  Das heißt, dieser Code stellt sicher, dass die ursprünglich in „onload“ geladene Methode ausgeführt wird (und zuerst ausgeführt wird), und verhindert, dass sie überschrieben wird, wenn die Methode „fun“ ausgeführt wird (Vorladen von Bildern).
*/

/*
Speichern Sie zunächst den Fotopfad in einem benutzerdefinierten Attribut, speichern Sie ein Lade-GIF in src und ersetzen Sie das benutzerdefinierte Attribut mit js in src, wenn das Bild den Anzeigebereich erreicht. Das Bild wird dann angezeigt.
Alle Bilder, die bei Bedarf geladen werden müssen, werden in einer Sammlung zusammengefasst. Beim Scrollen der Bildlaufleiste wird ermittelt, welche Bilder im sichtbaren Bereich erscheinen. Wenn sie erscheinen, wird ein Ladevorgang ausgeführt.
Nachdem der Ladevorgang abgeschlossen ist, wird das Bild aus der Sammlung oder dem Array entfernt und schließlich müssen immer weniger Bilder in das Array geladen werden.
*/
<div>
  <img src="img/lode.img" data-src="img/1.img" class="lazylode">
  <img src="img/lode.img" data-src="img/2.img" class="lazylode">
  <img src="img/lode.img" data-src="img/3.img" class="lazylode">
  <img src="img/lode.img" data-src="img/4.img" class="lazylode">
  <img src="img/lode.img" data-src="img/5.img" class="lazylode">
  <img src="img/lode.img" data-src="img/6.img" class="lazylode">
  <img src="img/lode.img" data-src="img/7.img" class="lazylode">
  <img src="img/lode.img" data-src="img/8.img" class="lazylode">
</div>
<Skript>
 var lazylode = document.querySelectorAll('.lazylode');
//Holen Sie sich das arrayähnliche Objekt, das nur die item()-Methode und die Längeneigenschaft, aber keine Array-Objektmethoden hat. var imgArr = Array.prototype.slice.call(lazylode);
//Konvertiere das Klassen-Array in ein Array lazylodeImg();
//Die auszuführende Lazy-Loading-Methode sollte zuerst Lazy Loading ausführen, um die Bilder im Anzeigebereich zu laden. var timer;
window.addEventListener('scrollen',Funktion(){
  clearTimeout(timer); //Drosselungstimer=setTimeout(function(){
    lazylodeImg(); // Beim Scrollen auf dem Bildschirm wird Lazy Loading durchgeführt }, 100);
},FALSCH)
Funktion lazylodeImg(){
  für(var i=0;i<imgArr.length;i++){
    if(isVisibleArea(imgArr[i])){//Beurteilen, ob es sich im sichtbaren Bereich befindet imgArr[i].src=imgArr[i].getAttribute('data-src');
      //Ändern Sie src in das benutzerdefinierte Attribut imgArr.splice(i,1);//Entfernen Sie die geladenen Bilder aus dem Array array i--;
      //Da die Zahl mit dem Index 1 aus dem Array gelöscht wird, wird die ursprüngliche Zahl mit dem Index 2 auf 1 übertragen}
  }
}
Funktion istSichtbarerBereich(el){
  var rect = el.getBoundingClientRect();
  //Holen Sie sich die oberen, linken und anderen Werte des Elements aus dem sichtbaren Bereich return rect.bottom>0 && rect.top<window.innerHeight && rect.right>0 && rect.left<window.innerHeight;
  // gibt „true“ zurück, wenn beide wahr sind
}
</Skript>