Teilen verschiedener JS-Image-Preload-Implementierungsmethoden_Javascript-Kenntnisse

Im Allgemeinen gibt es mehrere Möglichkeiten, Bilder vorab zu laden

1.HTML-Tag oder CSS-Ladebild

Natürlich können wir Bilder mithilfe des img-Tags oder über das Attribut „Hintergrundbild“ des Tags vorab laden. Aber um zu vermeiden, dass beim ersten Mal zu viele Bilder geladen werden und das Erlebnis beeinträchtigt wird. Im Allgemeinen ist es am besten, das Dokument zu laden, nachdem es gerendert wurde (mit window.onload usw.).

2. Pure js zur Implementierung des Vorladens

Das Javascript des Empty City Plan-Codes implementiert das Vorladen von Bildern. Das vollständige Beispiel für das Vorladen ist

function preloadimages(arr){  
  var newimages=[], loadedimages=0
  var postaction=function(){} //此处增加了一个postaction函数
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
    loadedimages++
    if (loadedimages==arr.length){
      postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
    }
  }
  for (var i=0; i<arr.length; i++){
    newimages[i]=new Image()
    newimages[i].src=arr[i]
    newimages[i].onload=function(){
      imageloadpost()
    }
    newimages[i].onerror=function(){
      imageloadpost()
    }
  }
  return { //此处返回一个空白对象的done方法
    done:function(f){
      postaction=f || postaction
    }
  }
}

Das Prinzip besteht darin, ein Bildobjekt in einer Schleife zu erstellen, den Quellcode des Objekts auf das angegebene Bild zu setzen und dann den Abschluss des Bildladens zu überwachen onload = function(){imageloadpost()} Wenn das Laden des Bildes abgeschlossen ist , imageloadpost wird ausgeführt. Es stellt sich heraus, dass IE6 immer noch ein Problem hat: Wenn das vorinstallierte Bild bereits im Speicher ist, wird das img.onload-Ereignis nicht erneut ausgelöst. Aber IE7 hat kein Problem. Es gibt kein Problem mit anderen Browsern, daher weist das obige img.onload-Abhörereignis keine Kompatibilitätsprobleme auf.

3.Ajax implementiert das Vorladen

Ajax-Anfragen können beliebige Daten anfordern, und Bilder sind keine Ausnahme. Werfen wir einen Blick auf das Vorladen von js/css

// XHR to request a JS and a CSS 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.js'); 
    xhr.send(''); 
    xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.css'); 
    xhr.send(''); 

Das Ajax-Vorladen von Bildern ist eigentlich dasselbe wie das reine JS-Vorladen von Bildern

new Image().src = "http://domain.tld/preload.png"; 

Die Erklärung hier ist nur das Laden von Ajax. Es versteht sich, dass es sich bei allen neuen Bildern um Ajax-Get-Anfragen handelt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, um das Vorladen von js-Bildern zu verstehen.