Beispiel für das Vorladen eines js-Images_Grundkenntnisse

Einfaches Beispiel für das Vorladen von JS-Bildern

Code kopieren Der Code lautet wie folgt:

Funktion loadImage( url, callback) {
if(url!='null') {
var img = new Image();
img.src = url;
if(img.complete) {
           Rückruf (img);
              else { ;
                                                                                       > }
}

loadImage(pic_url,loadImage);



Weitere Einzelheiten Beispiel

Die Manipulation des DOM über js wird häufig verwendet, um das asynchrone Laden der HTML-Elemente der aktuellen Seite zu erreichen. Lassen Sie mich über ein gewisses Verständnis des Image-Objekts sprechen.
Sehen Sie sich ein Beispiel an:

Code kopieren

Der Code lautet wie folgt: < ;input type= "button" name="" value="Bild laden" onclick="addImg('tt.jpg')" /> function addImg(isrc)

{
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
{
document.body.appendChild(Img);
}
}
//-->



Wenn die Seite enthält den obigen Code „tt.jpg“ wird beim Öffnen nicht geladen, sondern beim Klicken auf die Schaltfläche. Wenn der Ladevorgang abgeschlossen ist, wird das Onload-Ereignis ausgelöst und auf der Seite angezeigt.
Wenn Sie das Bild „tt.jpg“ zum ersten Mal laden, läuft es normal. Klicken Sie auf die Schaltfläche, um ein Bild zu laden und anzuzeigen. Was passiert, wenn Sie wiederholt darauf klicken?
In IE und Opera wird das Bild, außer wenn es zum ersten Mal geladen wird, normal angezeigt, aber dann erfolgt keine Reaktion, wenn Sie erneut darauf klicken, und das Gleiche gilt für die Aktualisierung. Lösen sie das „onload“-Ereignis nur einmal aus? Handelt es sich um einen Caching-Mechanismus?
In FF und Chrom wird jedes Mal ein Bild geladen, wenn Sie darauf klicken.

Leicht ändern:

Kopieren Sie den Code

Der Code lautet wie folgt:< ;! --

function addImg(isrc)

{
var Img = new Image();
Img.onload = function ()
{
document.body.appendChild( Img) ;
}
Img.src = isrc;
}
//-->




Nachdem ich es ausgeführt hatte, stellte ich fest, dass etwas Seltsames passierte. Alle Browser sind konsistent und laden ein Bild pro Klick. Was ist der Grund dafür?
Es ist ersichtlich, dass das Onload-Ereignis nicht nur einmal während der Ausführung von IE und Opera ausgelöst wird!

Denken Sie an einige Eigenschaften des Image-Objekts, Complete, ReadyState (IE-exklusiver Wert [uninitialisiert, vollständig]) (Bitte ändern Sie den Bildnamen, um zu verhindern, dass Caching den Effekt beeinträchtigt!)

Code kopieren

Der Code lautet wie folgt:

Nach dem obigen Test können wir einige Unterschiede für das vollständige Attribut erkennen. Mit anderen Worten, der IE beurteilt basierend darauf, ob das Bild Das heißt, wenn das geladene Bild angezeigt wird, ist der Wert des Attributs

vollständig. Andernfalls ist es immer falsch. Das hat nichts damit zu tun, ob das Bild zuvor geladen wurde , es hat nichts damit zu tun, ob das Bild schon einmal geladen wurde. Das Caching spielt keine Rolle!
Andere Browser verhalten sich jedoch anders, solange das Bild zuvor geladen wurde und der Browser über einen Cache verfügt.
Dies stimmt mit der Leistung des readyState-Attributs des IE überein.
An dieser Stelle können Sie sicher sein, dass alle Browser Bilder zwischenspeichern! Aber was genau verursacht das oben genannte Problem?
Wie wir alle wissen, geht das Laden von Dingen aus dem Cache sehr schnell, also kopieren Sie den Code in

Der Code ist wie folgt folgt:

Img.src = isrc;

Img.onload = ...


Ist es möglich, dass IE und Opera so schnell laden? Ist keine Zeit, Ereignisse anzuhängen?

Laden Sie dieses Mal ein nicht vorhandenes Bild, um den Effekt zu sehen:

Kopieren Sie den Code Der Code ist wie folgt folgt:

Es ist sicher, dass nicht alle Browser das Onload-Ereignis auslösen. Unabhängig davon, ob das Bild zwischengespeichert oder geladen ist, verhalten sich IE und Opera normal. „Complete“ ist immer falsch.
Der readyState von IE ist immer nicht initialisiert. Was verwirrend ist, ist FF, wo Imgttmt.complete immer true ist; noch verwirrender ist Chrom, wo Imgttmt.complete false ist, wenn anfänglich
new Imgttmt() aufgerufen wird. Danach ist der Wert von Imgttmt.complete immer wahr! Wenn Sie zu einem Bild wechseln, das noch nie geladen wurde, verhalten sich

FF und Chrom gleich. Beim ersten Laden ist der Imgttmt.complete-Wert falsch und dann wahr.

Während des Testprozesses haben wir außerdem festgestellt, dass die Ausführungsreihenfolge des Skripts tatsächlich Auswirkungen auf das Hinzufügen von Ereignissen wie „onload“ hat. Wenn Sie Ereignisse hinzufügen, nachdem sie angezeigt wurden, hat dies keine praktische Bedeutung!
Basierend auf den Eigenschaften von Javascript, einer interpretierenden Sprache, müssen Sie beim Anhängen eines Ereignisses darauf achten, das Ereignis vor dem Handle anzuhängen, das das Ereignis auslöst.