Detaillierte Erklärung des verzögerten Ladens von jQuery Lazyload

Lazy Load ist ein in JavaScript geschriebenes jQuery-Plugin. Es kann das Laden von Bildern auf langen Seiten verzögern, bis der Benutzer die Seite dorthin scrollt, wo sie sich befinden Das Gegenteil davon, wie das Vorladen von Bildern gehandhabt wird. Das verzögerte Laden von Bildern auf langen Seiten, die viele große Bilder enthalten, kann das Laden der Seite beschleunigen kann auch dazu beitragen, die Belastung des Servers zu reduzieren

Horizontales Scrollen

Horizontales Scrollen innerhalb des Containers

Vertikales Scrollen innerhalb des Containers

Es gibt viele Bilder auf der Seite

Nach fünf Sekunden Bilder nach einer Verzögerung von Sekunden laden

Verwenden Sie AJAX, um Bilder zu laden

So verwenden Sie

Lazy Load basiert auf jQuery. Bitte fügen Sie am Ende des HTML-Codes den folgenden Code hinzu:

das Tag des Bildes. Die Adresse des Bildes muss im Attribut data-original platziert werden. Geben Sie Lazy Loading-Bildern eine bestimmte Klasse (zum Beispiel: Lazy). Auf diese Weise können Sie ganz einfach Bild-Plugins bündeln. Der Code lautet wie folgt:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

Dies führt dazu, dass alle Bilder mit der Klasse Lazy verzögert geladen werden

Demo : Grundoptionen

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
$(function() {
 $("img.lazy").lazyload();
});

TIPPS: Hier müssen Breite und Höhe des Bildes eingestellt werden, sonst funktioniert das Plug-in möglicherweise nicht richtig.

Schwellenwert festlegen

Standardmäßig wird das Bild geladen, wenn es auf dem Bildschirm angezeigt wird. Wenn Sie das Bild im Voraus laden möchten, können Sie die Schwellenwertoption auf 200 festlegen sodass das Bild geladen wird, wenn es 200 Pixel vom Bildschirm entfernt ist

Ereignisse festlegen, um das Laden auszulösen

Sie können jQuery-Ereignisse wie Klick und Mouseover verwenden. Sie können auch benutzerdefinierte Ereignisse wie „sporty“ und „foobar“ verwenden. Standardmäßig wird gewartet, bis der Benutzer nach unten scrollt und das Bild im Ansichtsfenster angezeigt wird. Bilder nur laden, wenn der Benutzer darauf klickt:

$("img.lazy").lazyload({
 threshold : 200
});

Demo: Bilder nach einer Verzögerung von fünf Sekunden laden

Spezialeffekte verwenden

$("img.lazy").lazyload({
 event : "click"
});

Standardmäßig wartet das Plugin, bis das Bild vollständig geladen ist, und ruft show() auf. Sie können jeden gewünschten Effekt verwenden. Der folgende Code verwendet fadeIn (Einblendeffekt).

Demo: Einblendeffekt

Für Situationen, in denen JavaScript nicht aktiviert ist

Fast alle Bei Browsern, die JavaScript nicht unterstützen, können Sie jedoch dennoch echte Bilder anzeigen, wenn diese kein JavaScript unterstützen 🎜>

$("img.lazy").lazyload({
 effect : "fadeIn"
});

Sie können Platzhalter über CSS ausblenden.

<img class="lazy" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

In Browsern, die JavaScript unterstützen, müssen Sie den Platzhalter anzeigen, wenn das DOM bereit ist. Dies kann gleichzeitig mit der Initialisierung des Plugins erfolgen.

$("img.lazy") . show().lazyload();

Das Bild befindet sich im Container

.lazy {
 display: none;
}

Sie können das Plug-in für Bilder in scrollbaren Containern verwenden, z. B. für DIV-Elemente mit Bildlaufleisten Definieren Sie einfach den Container als jQuery-Objekt und übergeben Sie ihn als Parameter an die Initialisierungsmethode

Demo: horizontales Scrollen im Container, vertikales Scrollen im Container

Wenn das Bild ist diskontinuierlich

Beim Scrollen der Seite durchläuft Lazy Load eine Schleife durch die geladenen Bilder. Während der Schleife prüft es, ob sich das Bild im sichtbaren Bereich befindet. Standardmäßig wird die Schleife gestoppt, wenn das erste Bild gefunden wird das liegt nicht im sichtbaren Bereich. Ja, die Reihenfolge der Bilder auf der Seite stimmt mit der Reihenfolge im HTML-Code überein . Sie können das Ladeverhalten jedoch über die Option „failurelimit“ steuern.

Stellen Sie das Failurelimit auf 10 ein, damit das Plug-in funktioniert Beenden Sie die Suche erst, wenn 10 Bilder gefunden werden, die nicht im sichtbaren Bereich liegen. Wenn Sie ein umständliches Layout haben, setzen Sie diesen Parameter bitte höher.

Ausgeblendete Bilder laden

Es können viele ausgeblendete Bilder vorhanden sein Das Plug-in wird beispielsweise zum Filtern der Liste verwendet und Sie können den Anzeigestatus jedes Elements in der Liste ständig ändern. Um die Leistung zu verbessern, ignoriert Lazy Load standardmäßig Um versteckte Bilder zu laden, setzen Sie bitte „skip_invisible“ auf „false“

$("img.lazy").lazyload({
 failure_limit : 10
});

Plugin herunterladen

Neueste Version des Quellcodes und komprimierten Codes ist bereits in den Browsern Safari 5.1, Safari 6, Chrome 20, Firefox 12, Windows Chrome 20, IE 8 und IE 9 sowie iOS5 (iPhone und) verfügbar Getestet auf dem Safari 5.1-Browser des iPad).