Anwendung der dynamischen Bildladetechnologie und Anwendungsfall des Plug-Ins jquery.lazyload
|
Anwendungsbeispiel-Website http://www.uhuigou.net Das dynamische Laden von Bildern ist nichts Neues. Viele große Websites nutzen es. Die Vorteile liegen auf der Hand. Es spart vor allem Datenverkehr (einschließlich Server und Client), bietet ein besseres Benutzererlebnis und erhöht die Geschwindigkeit des Seitenöffnens. Das Prinzip ist nicht kompliziert. Das Bild verwendet immer noch das ursprüngliche img-Tag und der src zeigt auf ein standardmäßiges kleines Bild, z. B. beim Laden. Passen Sie dann ein img-Attribut an, um die echte Bildadresse zu speichern. Wenn der Benutzer den Bildspeicherort besucht, wird der src-Wert über die js-Steuerung in den Wert des benutzerdefinierten Attributs geändert. Diese Funktion wurde in viele Plug-ins integriert. Das von mir verwendete heißt jquery.lazyload. Wenn Sie es benötigen, laden Sie es einfach von meiner Website herunter. Dies ist die einzige Datei, die Sie benötigen. Natürlich benötigen Sie auch jquery.lazyload Die Verwendung ist auch sehr einfach. Fügen Sie dem ursprünglichen img-Tag ein data-original-Attribut hinzu, um die echte Bildadresse zu speichern. Das Beispiel lautet wie folgt Code kopieren Der Code lautet wie folgt:<img class="lazy" src="http://bcs.duapp.com/uhuigou/loading.gif" data-original="http://bcs.duapp.com/uhuigou/201306200831326313.jpg" style="width: 100%; display: inline-block;"> Schreiben Sie dies einfach für alle Bilder, die dynamisch geladen werden müssen. jquery.lazyload erkennt nur data-original, style oder andere Attribute. Sie können sie nach Bedarf schreiben. Schließlich müssen Sie sie im jquery.ready-Ereignis der Seite initialisieren. Code kopieren Der Code lautet wie folgt:$(Funktion() {$("img.lazy").lazyload();}); Okay, fertig! |
<<: So legen Sie eine feste IP-Adresse für eine virtuelle VMware-Maschine fest (grafisches Tutorial)
>>: Tutorial zur Installation des GreasyFork-JS-Skripts auf dem Mobiltelefon
Artikel empfehlen
HTML-Webseite: geordnete Liste ol und ungeordnete Liste ul
Listen zum Organisieren von Daten Nachdem die Les...
Mehrere Möglichkeiten zum Ausblenden von HTML-Elementen
1. CSS verwenden Code kopieren Der Code lautet wie...
Ausführliche Erläuterung des globalen Status des WeChat-Applets
Vorwort Im WeChat-Applet können Sie globalData vo...
Das WeChat-Applet realisiert den Effekt des Siebschüttelns
In diesem Artikel wird der spezifische Code des W...
Führen Sie die Schritte zum Erstellen eines Squid-Proxyservers unter Linux aus.
Vorwort Dieser Artikel stellt hauptsächlich die r...
JavaScript implementiert Feuerwerkseffekte mit Soundeffekten
Ich habe eine halbe Stunde gebraucht, um den Code...
JS praktisches objektorientiertes Schlangenspielbeispiel
Inhaltsverzeichnis denken 1. Bild mit dem gierige...
Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign
In Gästebüchern, Foren und anderen Orten werden i...
VUE führt die Implementierung der Verwendung von G2-Diagrammen ein
Inhaltsverzeichnis Über G2 Chart verwenden Vollst...
Detaillierte Erklärung, wo Docker Protokolldateien speichert
Inhaltsverzeichnis Wo werden die Protokolle gespe...
Implementierung eines dynamischen Partikel-Hintergrund-Plugins für die Vue-Anmeldeseite
Inhaltsverzeichnis Die dynamischen Partikeleffekt...
Lösung für das Problem mit verstümmelten chinesischen MySQL-Zeichen
1. Die chinesischen verstümmelten Zeichen erschei...
Ein vorläufiges Verständnis der benutzerdefinierten CSS-Eigenschaften
Heute sind CSS-Präprozessoren der Standard für di...
Player in Webseite einbetten Einbettungselement Autostart falsch ungültig
Kürzlich musste ich einen Player in eine Webseite ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7
In diesem Tutorial erfahren Sie alles über die In...