3 Möglichkeiten, mithilfe von JavaScript festzustellen, ob ein Bild geladen wurde_Javascript-Kenntnisse

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

Vorteile: Einfach und benutzerfreundlich, hat keinen Einfluss auf den HTML-Code.

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().

Code kopieren Der Code lautet wie folgt:

Vorteile: Elementereignisse können stapelweise gebunden werden, ohne dass sich dies auf den HTML-Codeinhalt auswirkt

Nachteile: Es erfordert die Unterstützung der JQuery-Bibliothek und der Code muss unter den Elementen platziert werden, die bedient werden müssen.