Native Javascript-Methode zum Implementieren des verzögerten Ladens von Bildern_Javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt, wie das verzögerte Laden von Bildern mit nativem JavaScript implementiert wird. Das verzögerte Laden von Bildern verfügt tatsächlich über ein JQuery-Plug-In, und die Lademethode ist sehr einfach und vernünftig. Einige Freunde waren jedoch der Meinung, dass das Laden des JQuery-Plug-In-Pakets zu groß war, also schrieb Yu Shi selbst eines und teilte es mit Ihnen .

Zuallererst kann das verzögerte Laden von Bildern unsere Bandbreite sparen und ein besseres Benutzererlebnis bieten, insbesondere für Websites mit vielen Bildern. Dies ist sehr wichtig.

Prinzip des verzögerten Ladens von Bildern

Das Prinzip des verzögerten Ladens von Bildern besteht darin, dass die Bildquelle in HTML nicht die tatsächliche Bildadresse ist, sondern die Bildadresse dem img-Tag mit einem benutzerdefinierten Attribut zugewiesen wird, wie zum Beispiel: src="img/loading.gif ” data-url="img/1.jpg" und verwenden Sie dann js, um das Browser-Bildlaufleistenereignis zu bestimmen. Wenn Sie einen bestimmten Punkt erreichen, weisen Sie dem src des aktuellen img-Tags die tatsächliche Adresse des Bildes im benutzerdefinierten Attribut zu , wodurch eine dynamische Bildverarbeitung realisiert wird. In einem realen Projekt können die Adressen dieser Bilder über Ajax übergeben und den benutzerdefinierten Attributen von img zugewiesen werden.

Beispiel für verzögertes Laden von Bildern mit nativem JS:

Der Textinhalt scheint mir doch etwas langweilig zu sein. Ich habe eine einfache Demo geschrieben und kann jetzt alle Freunde, die ihn benötigen, direkt kopieren und verstehen, nachdem er sich den Code angesehen hat.

Code kopieren Der Code lautet wie folgt:

    img{display:block;width:350px;height:245px;background:url(img/loading.gif) zentriert zentriert, nicht wiederholt🎜>

希望本文所述对大家的javascript程序设计有所帮助.