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
Drei gängige Möglichkeiten zum Einbetten von CSS in HTML-Dokumente
Die folgenden drei Methoden werden häufig verwende...
Bei verschachtelten MySQL-Transaktionen aufgetretene Probleme
MySQL unterstützt verschachtelte Transaktionen, a...
So konfigurieren Sie SSL für den Koa2-Dienst
I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...
Lösen Sie das Problem verschwindender Docker-Images
1. Spiegelbilder verschwinden in 50 und 93 [root@...
Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen
Eine Geschichte über die Datenbankleistung Währen...
Detailliertes Tutorial zur Installation von NVIDIA-Treibern + CUDA + cuDNN in Ubuntu 16.04
Vorbereitung 1. Überprüfen Sie, ob die GPU CUDA u...
Vue+thinkphp5.1+axios zum Realisieren des Datei-Uploads
In diesem Artikel erfahren Sie, wie Sie mit think...
Ubuntu 20.04-Desktopinstallation und Aktivierung der Root-Berechtigung sowie Details zur SSH-Installation
Der Artikel zeichnet hauptsächlich den einfachen ...
Optimale Webseitenbreite und ihre kompatible Implementierungsmethode
1. Beim Entwerfen einer Webseite ist das Bestimmen...
Besprechen Sie den Entwicklungstrend der Baidu Encyclopedia UI
<br />Die offizielle Version der Baidu-Enzyk...
Modularität in Node.js, npm-Paketmanager erklärt
Inhaltsverzeichnis Das Grundkonzept der Modularit...
So installieren Sie Nginx in CentOS
Offizielle Dokumentation: https://nginx.org/en/li...
Erstellen eines sekundären Menüs mit JavaScript
In diesem Artikelbeispiel wird der spezifische Ja...
Detailliertes Tutorial zum verteilten Betrieb von JMeter in der Docker-Umgebung
1. Erstellen Sie das Basisimage von jmeter Das Do...
Nginx-Reverseproxy und Lastausgleichspraxis
Reverse-Proxy Unter Reverse-Proxy versteht man de...