Heim > Web-Frontend > js-Tutorial > JS-Plug-in LazyImgv1.0 Bild-Lazy-Loading-Nutzungsanalyse

JS-Plug-in LazyImgv1.0 Bild-Lazy-Loading-Nutzungsanalyse

巴扎黑
Freigeben: 2017-09-05 10:26:40
Original
1535 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung des JS-Plug-ins LazyImgv1.0 für das Laden verzögerter Bilder vor und analysiert anhand von Beispielen die Vorsichtsmaßnahmen und Kernbedienungsfähigkeiten bei der Verwendung des Plug-ins LazyImgv1.0 für das Laden verzögerter Bilder Code für Leser zum Herunterladen und Nachschlagen. Freunde können sich auf

beziehen. In diesem Artikel wird die Verwendung des JS-Plug-ins „LazyImgv1.0 für die Verzögerung des Ladens von Bildern“ erläutert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hinweis: LazyImg muss das Lazy-Data-Attribut definieren, der Attributwert ist der Bildpfad von src

JS-Datei einführen:


<script type="text/javascript" src="js/lazyImg.v1.0.js"></script>
Nach dem Login kopieren

Standardmäßig: Wenn eine Bedingung im IMG erfüllt ist, wird das Bild geladen;

1. Keine Klassenattribute

2. Wenn es ein Klassenattribut gibt und das Attribut nicht den CSS-Stilnamen mit dem Präfix „lazy-“ enthält

So verbieten Sie das Laden von Bildern standardmäßig

JS-Code:


LzDefault.action = false;
Nach dem Login kopieren
So zeigen Sie das Bild bei einem Klickereignis an

JS-Code:


LazyImg.lazy("lazy-name");
Nach dem Login kopieren


<img class="lazy-name" lazy-data="图片路径"/>
Nach dem Login kopieren
Der Name in „lazy-name“ kann angepasst werden, „lazy-“ ist das Präfix und muss vorhanden sein

DEMO :


Das obige ist der detaillierte Inhalt vonJS-Plug-in LazyImgv1.0 Bild-Lazy-Loading-Nutzungsanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage