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
5 Möglichkeiten, um festzustellen, ob ein Objekt in JS ein leeres Objekt ist
1. Konvertieren Sie das JSON-Objekt in eine JSON-...
Lösung zum Erstellen mehrerer Datenbanken, wenn Docker PostgreSQL startet
1 Einleitung Im Artikel „PostgreSQL mit Docker st...
So implementieren Sie mit CSS3 eine Warteschlangenanimation ähnlich einer Online-Liveübertragung
Ein Freund in der Gruppe hat zuvor eine Frage ges...
Detaillierte Analyse des Problems beim Hinzufügen von Where-Bedingungen mit Left Join in MySQL
Aktuelle Nachfrage: Es gibt zwei Tabellen, Gruppe...
Beispiel zum Ändern der inländischen Quelle in Ubuntu 18.04
Die eigene Quelle von Ubuntu stammt aus China, da...
CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10
Während Ubuntu heute das beliebteste Linux-Betrie...
Detaillierte Erläuterung des Persistenzimplementierungsprinzips von Transaktionen in MySQL
Vorwort Wenn es um Datenbanktransaktionen geht, f...
Verlieben Sie sich in die einfachen CSS-Details, obwohl unbedeutend, können die Effizienz verbessern
Die Zukunft von CSS ist so aufregend: Einerseits b...
Sqoop-Exportkarte100 % reduzieren0 % steckt aus verschiedenen Gründen und Lösungen fest
Ich nenne diese Art von Fehler einen typischen „H...
Detaillierte Erläuterung der Nginx-Frontend-Verteilungsmethode basierend auf $remote_addr
Die Voraussetzungen sind wie folgt: Unter dem Dom...
HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf
<br />Die Kopfzeile bezieht sich auf die ers...
3 verschiedene Möglichkeiten zum Löschen der Optionsoptionen im Auswahltag
Methode 1 Code kopieren Der Code lautet wie folgt:...
Detaillierte Erklärung der RPM-Installation in MySQL
Installation und Deinstallation anzeigen # rpm -q...
Verwenden Sie auto.js, um die automatische tägliche Check-in-Funktion zu realisieren
Verwenden Sie auto.js, um den täglichen Check-in ...
Zusammenfassung der Wissenspunkte zu den grundlegenden Attributen von Linux-Dateien
Das Linux-System ist ein typisches Mehrbenutzersy...