Implementierung von JS-Vorladebildern

Dieser Artikel teilt Ihnen hauptsächlich die Implementierung des JS-Vorladens von Bildern mit und hofft, allen zu helfen.

Voraussetzung: Klicken Sie im Projekt auf die Schaltfläche, um die Funktion zum Wechseln von Hintergrundbildern zu realisieren.
Problem: Wenn beim Ändern des Hintergrundbildattributs von CSS das Bild zuerst geladen und dann angezeigt wird, entsteht vorübergehend ein leerer Zeitraum.

Lösung: Laden Sie das Hintergrundbild im Voraus vor
Verwenden Sie zunächst den Image()-Konstruktor, um ein Off-Screen-Bildobjekt zu erstellen, und setzen Sie dann das src-Attribut des Objekts auf die URL. Da das Bildelement nicht zum Dokument hinzugefügt wird, ist es unsichtbar, der Browser wird jedoch trotzdem geladen das Bild und speichern Sie es im Cache.

function preloadImg(url){
  var imageObj = new Image()
  imageObj.src=url
}var aImgUrlList = ['image1.png', 'image2.png']for (var i of aImgUrlList)
    preloadImg(i)

Verwandte Empfehlungen:

JS-Bildmethode vorladen Zusammenfassung_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonImplementierung von JS-Vorladebildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!