Ich habe dies auf zahlreichen "modernen" Websites (z. B. Facebook- und Google-Bildersuche) bemerkt, auf denen die Bilder unter der Falz nur geladen werden, wenn der Benutzer die Seite so weit nach unten scrollt, dass sie in den sichtbaren Ansichtsfensterbereich gelangen ( bei der Ansichtsquelle wird die Seite angezeigt X Anzahl von <img>
Tags, die jedoch nicht sofort vom Server abgerufen werden ). Wie heißt diese Technik, wie funktioniert sie und in wie vielen Browsern funktioniert sie? Und gibt es ein jQuery-Plugin, das dieses Verhalten mit minimaler Codierung erreichen kann?
Bearbeiten
Bonus: Kann jemand erklären, ob es ein "onScrolledIntoView" oder ein ähnliches Ereignis für HTML-Elemente gibt. Wenn nicht, wie funktionieren diese Plugins?
javascript
jquery
html
scroll
lazy-loading
Salman A.
quelle
quelle
Antworten:
Einige der Antworten hier sind für unendliche Seiten. Was Salman verlangt, ist das verzögerte Laden von Bildern.
Plugin
Demo
EDIT: Wie funktionieren diese Plugins?
Dies ist eine vereinfachte Erklärung:
quelle
Dave Artz von AOL hielt letztes Jahr auf der jQuery Conference Boston einen großartigen Vortrag über Optimierung. AOL verwendet ein Tool namens Sonar zum Laden bei Bedarf basierend auf der Bildlaufposition. Überprüfen Sie den Code auf Einzelheiten zum Vergleich von scrollTop (und anderen) mit dem Elementversatz, um festzustellen, ob ein Teil oder das gesamte Element sichtbar ist.
jQuery Sonar
Dave spricht in diesen Folien über Sonar . Das Sonar startet auf Folie 46, während die allgemeine Diskussion "Laden bei Bedarf" auf Folie 33 beginnt.
quelle
Ich habe mir meine eigene grundlegende Methode ausgedacht, die (bisher) gut zu funktionieren scheint. Es gibt wahrscheinlich ein Dutzend Dinge, die einige der populären Skripte ansprechen, an die ich nicht gedacht habe.
Hinweis - Diese Lösung ist schnell und einfach zu implementieren, aber natürlich nicht besonders leistungsfähig. Schauen Sie sich auf jeden Fall den neuen Intersection Observer an, wie von Apoorv erwähnt und von developer.google erklärt , wenn die Leistung ein Problem darstellt.
Die JQuery
Beispiel-HTML-Code
Erklärt
Wenn die Seite gescrollt wird, wird jedes Bild auf der Seite überprüft.
$(this).attr('data-src')
- wenn das Bild das Attribut hatdata-src
und wie weit diese Bilder vom unteren Rand des Fensters entfernt sind.
$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)
Stellen Sie die + 100 nach Ihren Wünschen ein (- 100 zum Beispiel)
var source = $(this).data('src');
- Erhält den Wertdata-src=
der Bild-URL$(this).attr('src', source);
- setzt diesen Wert in diesrc=
$(this).removeAttr('data-src');
- Entfernt das data-src-Attribut (damit Ihr Browser keine Ressourcen verschwendet, die mit den bereits geladenen Bildern herumspielen).Hinzufügen zu vorhandenem Code
So konvertieren Sie Ihre html, in einem Editor nur Suchen und Ersetzen
src="
mitsrc="" data-src="
quelle
Es gibt eine ziemlich schöne unendliche Scroll - Plugin hier
Ich habe noch nie selbst einen programmiert, aber ich würde mir vorstellen, dass es so funktioniert.
Ein Ereignis ist an das Scrollen des Fensters gebunden
Die aufgerufene Funktion prüft, ob der Bildlauf oben größer als die Fenstergröße ist
Es wird eine AJAX-Anforderung gestellt, in der angegeben wird, bei welchem Ergebnis # begonnen werden soll, wie viele erfasst werden sollen und welche anderen Parameter für das Abrufen von Daten erforderlich sind.
Der Ajax gibt einige (höchstwahrscheinlich JSON-formatierte) Inhalte zurück und übergibt sie an die Funktion loadnig.
Hoffe das macht Sinn.
quelle
Verwenden Sie Lozad.js (nur 569 Byte ohne Abhängigkeiten), das IntersectionObserver verwendet , um Bilder performant zu laden.
quelle
Das Schweizer Taschenmesser zum faulen Laden von Bildern ist der ImageLoader von YUI .
Denn dieses Problem beinhaltet mehr als nur das Beobachten der Bildlaufposition.
quelle
Dieser Link funktioniert für mich Demo
1.Laden Sie das jQuery loadScroll-Plugin nach der jQuery-Bibliothek, jedoch vor dem schließenden Body-Tag.
2. Fügen Sie die Bilder mithilfe des HTML5-Attributs data-src zu Ihrer Webseite hinzu. Sie können Platzhalter auch mit dem src-Attribut des regulären img einfügen.
3. Rufen Sie das Plugin für die IMG-Tags auf und geben Sie die Dauer des FadeIn-Effekts an, wenn Ihre Bilder angezeigt werden
quelle
Ich benutze jQuery Lazy . Das Testen dauerte ungefähr 10 Minuten und ein oder zwei Stunden, um die meisten Bildlinks auf einer meiner Websites ( CollegeCarePackages.com ) hinzuzufügen . Ich habe keinerlei Beziehung (keine / null) zum Entwickler, aber es hat mir viel Zeit gespart und im Grunde dazu beigetragen, unsere Absprungrate für mobile Benutzer zu verbessern, und ich weiß das zu schätzen.
quelle