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
Erläuterung der Truncate Table-Verwendung
TRUNCATE-TABELLE Löscht alle Zeilen in einer Tabe...
Eine kurze Diskussion über die Kerneloptimierung mit hoher Parallelität bei Nginx10m+
Was ist hohe Parallelität? Die standardmäßigen Li...
Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags
Dieser Artikel stellt einige Aspekte von HTML-Tag...
Detaillierte Erklärung der Verwendung des Positionsattributs in HTML (vier Typen)
Die vier Eigenschaftswerte von Position sind: 1.V...
Zusammenfassung der zwölf Methoden der Vue-Wertübertragung
Inhaltsverzeichnis 1. Vom Vater zum Sohn 2. Vom S...
Beispielcode zur Konvertierung von http in https mit nginx
Ich schreibe gerade ein kleines Programm. Da die ...
Eine detaillierte Diskussion über MySQL-Deadlocks und -Logs
Vor kurzem sind mehrere Datenanomalien in MySQL o...
Implementierung von webpack-dev-server zum Erstellen eines lokalen Servers
Inhaltsverzeichnis Vorwort Webpack-Deb-Server Sta...
Quellcode der HTML-Einstellungen für die Benutzerregistrierungsseite
Gestalten Sie die oben gezeigte Webseite: <!DOC...
Linux-Fernsteuerungsprogramm für Windows-System (drei Methoden)
Manchmal müssen wir Programme auf dem Windows-Sys...
Drei Vue-Slots zur Lösung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten
Inhaltsverzeichnis Vorwort Umgebungsvorbereitung ...
Detaillierte Erklärung des Unterschieds zwischen var, let und const in JavaScript
Inhaltsverzeichnis Als globale Variable Variables...
5 VueUse-Bibliotheken, die die Entwicklung beschleunigen können (Zusammenfassung)
Inhaltsverzeichnis Welche Dienstprogramme bietet ...
JavaScript zum Erzielen eines Kalendereffekts
In diesem Artikel wird der spezifische Code für J...
Sequenzimplementierungsmethode basierend auf MySQL
Das Team ersetzte den neuen Rahmen. Alle neuen Un...