Manchmal müssen wir in der Front-End-Entwicklungsarbeiten, um Bildinformationen zu erhalten, die Größe und Größe des Bildes nach dem Laden des Bildes korrekt erhalten und die entsprechende Rückruffunktion ausführen, damit das Bild einen bestimmten Anzeigeeffekt erzeugt. Dieser Artikel organisiert hauptsächlich mehrere gängige Methoden zur Beurteilung des Abschlusses der Bildbelastung und erklärt und erklärt ihn durch die Kombination aus Code und praktischen Anwendungen.
Onload -Methode
Führen Sie den nachfolgenden Javascipt -Code aus, indem Sie das IMG -Tag hinzuzufügen und die entsprechende Funktion ausfüllen. Im folgenden Code -Beispiel wird das IMG -Element standardmäßig nicht angezeigt. Es wird durch Onload festgelegt, dass das Bild nach Abschluss der Last angezeigt wird.
Die Codekopie lautet wie folgt:
<img onload = "get (this)" src = "..." style = 'display: Keine' />
<script type = "text/javaScript">
Funktion get (ts) {
ts.Style.display = 'Block'; // Bilder zeigen
}
</script>
Vorteile: Der Abschnitt JavaScript -Code kann auf einem beliebigen Teil der Seite platziert und auf den meisten willkürlichen Bildern verwendet werden. Es ist relativ einfach zu bedienen und leicht zu verstehen.
Nachteile: Das Onlaod -Attribut muss in jedem Tag veröffentlicht werden, was in einigen Fällen, in denen HTML -Code nicht direkt manipuliert werden kann oder wenn der Code vereinfacht werden muss, nicht anwendbar ist.
Javascipt Native Methode
Wählen Sie das Bild mit der angegebenen ID aus, geben Sie die Rückrufmethode über Onload an, und eine Eingabeaufforderung mit dem Wort "Bildladen abgeschlossen" wird nach dem Laden des Bildes angezeigt.
Die Codekopie lautet wie folgt:
<img id = "pic1" src = "..." />
<script Language = "JavaScript">
document.getElementById ("pic1"). onload = function () {
ALERT ("Bildladen abgeschlossen");
}
</script>
Vorteile: Einfach und einfach zu bedienen, ohne den HTML -Code zu beeinflussen.
Nachteile: Es kann nur ein Element angegeben werden, und der Javascipt -Code muss unter dem Bildelement platziert werden
JQuery -Methode
Für jedes Bildelementbindungsereignis mit Klassen PIC1 wird das Element allmählich durch die Lastmethode von JQuery angezeigt.
Beachten Sie, dass das Lastereignis nicht in $ (document) .Ready () binden.
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
$ (function () {
$ ('. pic1'). Jede (function () {
$ (this) .load (function () {
$ (this) .fadein ();
});
});
})
</script>
Vor-
Nachteile: Die Unterstützung der JQuery -Bibliothek ist erforderlich, und der Code muss unter das Element platziert werden, das betrieben werden muss.