Manchmal müssen wir bei Front-End-Entwicklungsarbeiten, um Bildinformationen zu erhalten, nach dem Laden des Bildes die Größe des Bildes korrekt ermitteln und die entsprechende Rückruffunktion ausführen, um einen bestimmten Anzeigeeffekt für das Bild zu erzeugen. In diesem Artikel werden hauptsächlich einige gängige JavaScript-Methoden zur Beurteilung, wann ein Bild geladen wird, erläutert und anhand einer Kombination aus Code und praktischen Anwendungen erläutert.
Onload-Methode
Führen Sie den nachfolgenden Javascript-Code aus, indem Sie das Onload-Attribut zum IMG-Tag hinzufügen und die entsprechende Funktion ausfüllen. Im folgenden Codebeispiel wird das img-Element standardmäßig nicht angezeigt, um zu bestimmen, dass das Bild nach Abschluss des Ladevorgangs angezeigt wird.
Vorteile: Der Javascript-Codeteil kann in jedem Teil der Seite zum Laden platziert werden und kann für die meisten Bilder verwendet werden. Es ist relativ einfach zu bedienen und leicht zu verstehen.
Nachteile: Das onlaod-Attribut muss an jedes Tag angehängt werden, was in einigen Situationen nicht anwendbar ist, in denen HTML-Code nicht direkt manipuliert werden kann oder eine Codevereinfachung erforderlich ist
native Javascript-Methode
Wählen Sie das Bild mit der angegebenen ID aus und geben Sie die Rückrufmethode über onload an. Nachdem das Bild geladen wurde, wird eine Eingabeaufforderung mit der Meldung „Bild geladen“ angezeigt.
Nachteile: Es kann nur ein Element angegeben werden und der Javascript-Code muss unter dem Bildelement platziert werden
jquery-Methode
Binden Sie mit der Klasse pic1 ein Ereignis an jedes Bildelement und verwenden Sie die Lademethode von jquery, um das Element schrittweise anzuzeigen.
Hinweis: Binden Sie das Ladeereignis nicht in $(document).ready().
Nachteile: Es erfordert die Unterstützung der JQuery-Bibliothek und der Code muss unter den Elementen platziert werden, die bedient werden müssen.
