Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > jQuery-Lazy-Loading-Bild-Plug-In Lazy Load-Nutzungsanleitung_jquery

jQuery-Lazy-Loading-Bild-Plug-In Lazy Load-Nutzungsanleitung_jquery

WBOY
Freigeben： 2016-05-16 16:07:44
Original
1591 Leute haben es durchsucht

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.

Verzögertes Laden von Bildern auf langen Seiten, die viele große Bilder enthalten, kann das Laden der Seite beschleunigen, nachdem sichtbare Bilder geladen wurden.

Wie benutzt man?

Lazy Load hängt von jQuery ab. Bitte fügen Sie den folgenden Code zum Kopfbereich der Seite hinzu:

Code kopieren Der Code lautet wie folgt:



Sie müssen das Booth-Symbolbild im src-Attribut festlegen. Die Demoseite verwendet ein 1×1 Pixel großes GIF-Bild und Sie müssen die URL des echten Bildes auf das data-original-Attribut festlegen . Hier können Sie eine bestimmte Klasse definieren, um das Bildobjekt abzurufen, das träge geladen werden muss. Auf diese Weise können Sie die Plug-in-Bindung einfach steuern.

Code kopieren Der Code lautet wie folgt:


Der Code zum Verarbeiten von Bildern lautet wie folgt.

Code kopieren Der Code lautet wie folgt:

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

Dies führt dazu, dass alle Bilder mit der Klasse „lazy“ träge geladen werden. Sie können sich auf die Demo der Grundoptionen beziehen

Empfindlichkeit einstellen

JavaScript ist in fast allen Browsern aktiviert. Möglicherweise möchten Sie jedoch dennoch echte Bilder auf Clients anzeigen, die JavaScript nicht unterstützen. Um dies ordnungsgemäß zu verhindern, können Sie echte Bildfragmente

Code kopieren Der Code lautet wie folgt:



Platzhalter können per CSS ausgeblendet werden.

Code kopieren Der Code lautet wie folgt:

.faul {
Anzeige: keine;
}

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

Code kopieren Der Code lautet wie folgt:

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

Diese sind optional, sollten aber durchgeführt werden, wenn Sie möchten, dass Ihr Plugin reibungslos heruntergestuft wird.

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

Code kopieren Der Code lautet wie folgt:
$("img.lazy").lazyload({ Schwellenwert: 200 });

Platzhalterbild

Sie können auch ein Platzhalterbild festlegen und Ereignisse definieren, um die Ladeaktion auszulösen. Zu diesem Zeitpunkt müssen Sie eine URL-Adresse für das Platzhalterbild festlegen, das bereits im Bild enthalten ist Plugin Inside.

Durch Ereignis ausgelöstes Laden

Das Ereignis kann ein beliebiges jQuery-Ereignis sein, z. B. „Click“ und „Mouseover“. Sie können auch benutzerdefinierte Ereignisse verwenden, z. B. „sporty“ und „foobar“. Standardmäßig befindet es sich im Wartezustand, bis der Benutzer zur Position scrollt Bild im Fenster. Um zu verhindern, dass das Platzhalterbild geladen wird, bis es angeklickt wird, können Sie Folgendes tun:

Code kopieren Der Code lautet wie folgt:

$("img").lazyload({
Platzhalter: „img/grey.gif“,
Ereignis: „Klick“
});

Spezialeffekte verwenden

Wenn das Bild vollständig geladen ist, verwendet das Plug-in standardmäßig die Methode show(), um das Bild anzuzeigen. Tatsächlich können Sie alle Spezialeffekte verwenden, die Sie verarbeiten möchten ist die Effektdemonstrationsseite

Code kopieren Der Code lautet wie folgt:

$("img.lazy").lazyload({
Effekt: „fadeIn“
});

Das Bild befindet sich im Container

Sie können das Plug-in für Bilder in scrollbaren Containern verwenden, z. B. für DIV-Elemente mit Bildlaufleisten. Sie müssen lediglich den Container als jQuery-Objekt definieren und ihn als Parameter an die Initialisierungsmethode übergeben eine horizontal scrollende Demoseite und eine vertikal scrollende Demoseite.

Code kopieren Der Code lautet wie folgt:

#container {
Höhe: 600px;
Überlauf: scrollen;
}
$("img.lazy").lazyload({    
Container: $("#container")
});

Wenn die Bilder nicht in der richtigen Reihenfolge angeordnet sind

Beim Scrollen durch die Seite durchläuft Lazy Load eine Schleife und erkennt, ob sich das Bild im sichtbaren Bereich befindet. Standardmäßig stoppt die Schleife, wenn das erste Bild nicht im sichtbaren Bereich ist Das Bild wird als flüssig verteilt betrachtet, die Reihenfolge der Bilder auf der Seite stimmt jedoch nicht mit der Reihenfolge im HTML-Code überein die Failurelimit-Option

Code kopieren Der Code lautet wie folgt:

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

Setzen Sie die Fehlergrenze auf 10, damit das Plug-in die Suche stoppt, nachdem es 10 Bilder gefunden hat, die nicht im sichtbaren Bereich sind. Wenn Sie ein umständliches Layout haben, setzen Sie diesen Parameter bitte höher.

Verzögertes Laden von Bildern

Eine unvollständige Funktion des Lazy Load-Plugins, die jedoch auch zum verzögerten Laden von Bildern verwendet werden kann. Der folgende Code implementiert das Laden der Bilder in der Seite Der angegebene Bereich wird automatisch geladen. Dies ist die Lazy-Loading-Demoseite.

Code kopieren Der Code lautet wie folgt:

$(function() {                                                $("img:below-the-fold").lazyload({
        Ereignis: „sportlich“
}); }); $(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000 });

Versteckte Bilder werden geladen

Auf Ihrer Seite sind möglicherweise viele versteckte Bilder verborgen. Wenn Sie beispielsweise das Plug-in zum Filtern der Liste verwenden, können Sie den Anzeigestatus jedes Elements in der Liste kontinuierlich ändern, um die Leistung zu verbessern Beim Laden werden ausgeblendete Bilder standardmäßig ignoriert. Wenn Sie ausgeblendete Bilder laden möchten, setzen Sie „skip_invisible“ bitte auf „false“

Code kopieren Der Code lautet wie folgt:
$("img.lazy").lazyload({
Skip_invisible: false
});

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Veuillez prendre un moment pour partager l'article avec vos amis ou laisser un commentaire. Nous vous remercierons sincèrement pour votre soutien !

Verwandte Etiketten：
jquery lazy load
Quelle：php.cn
Vorheriger Artikel：Jquery implementiert die Mausbewegung zum Vergrößern von Bildern mit der Funktion example_jquery Nächster Artikel：JavaScript-Methode zur Implementierung häufig verwendeter kaskadierender Dropdown-Listen für Provinzen und Städte der zweiten Ebene_Javascript-Fähigkeiten
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
So rufen Sie Werte nicht ausgewählter Zeilen in einer HTML-Datentabelle mithilfe von JQuery ab Ich versuche, den Wert aller Zeilen zu ermitteln, in denen nicht auf die Schaltfläche gekl...
Aus 2024-04-05 09:26:49
0
1
1418
Benötigen Sie ein JQuery-Skript, um ausgewählte Optionen basierend auf der aktuellen Auswahl des Endbenutzers aus einem Auswahlfeld zu verschieben Ich habe eine HTML-Seite, auf der der Endbenutzer unsere Artikel über ein Auswahlfeldeleme...
Aus 2024-04-04 18:40:04
0
1
3528
Ich habe über Lesezeichen ein Element in reinem CSS erstellt. Es ist erstellt, aber nicht sichtbar Mein Code lautet wie folgt: g=document.createElement('div');g.setAttribute("id",...
Aus 2024-04-04 17:27:27
0
1
417
Formulardaten können nicht auf Safari/Firefox iOS gesendet werden Dies funktioniert auf allen Plattformen außer Safari/Firefox unter iOS: jQuery("#gfor...
Aus 2024-04-04 12:53:48
0
1
303
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage