So laden Sie Bilder dynamisch (oder träge), wenn Benutzer sie in die Ansicht scrollen

96

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?

Salman A.
quelle
Benötigen Sie nur Bild faul laden? Wenn Sie Inhalte faul laden müssen, ist das Infinite Scroll Plugin die richtige Antwort
Soju
@rsp @jwegner @Nicholas tut mir leid, aber das fragt Salman nicht.
Alec Smart
@soju: Ich bin nur daran interessiert, Bilder faul zu laden. aber ich werde vielleicht irgendwann in der (ziemlich fernen) Zukunft andere Möglichkeiten prüfen.
Salman A
20
Sie wundern sich, warum das Standardverhalten eines Browsers nicht darin besteht, nur sichtbare Bilder zu laden. Stellen Sie sich vor, wie viel Bandbreite in den letzten 18 Jahren eingespart worden wäre, wenn dies der Fall wäre!
Matthew Lock
2
Obwohl ich den Grund für das verzögerte Laden verstehe ... kann ich es ehrlich gesagt nicht ertragen, wenn ich eine Site besuche, die diese Methode verwendet. Das Blinken der Bilder macht mich verrückt! :)
Booski

Antworten:

64

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:

  1. Finden Sie die Fenstergröße und die Position aller Bilder und ihre Größen
  2. Wenn das Bild nicht innerhalb der Fenstergröße liegt, ersetzen Sie es durch einen Platzhalter derselben Größe
  3. Wenn der Benutzer nach unten scrollt und die Position des Bildes <Bildlauf + Fensterhöhe ist, wird das Bild geladen
Alec Smart
quelle
Würden sie in der Anwendung nicht gleich funktionieren? Eine unendliche Schriftrolle in einer einzelnen Bildspalte wäre dasselbe wie ein verzögertes Laden, oder? Vielleicht bin ich verwirrt.
Jwegner
1
Mit @jwegner Infinite scroll können Sie neue Elemente am unteren Rand der Seite hinzufügen, wenn der Benutzer den unteren Rand erreicht (oder sich ihm nähert). Faul geladene Bilder können Platzhalter mit den gleichen Abmessungen auf der Seite haben, wobei die Bilder selbst beim Scrollen geladen werden. Letzteres könnte also verzögert geladen werden, ohne das Seitenlayout zu beeinträchtigen.
Annika Backstrom
Dies funktioniert gut auf Desktop-Browsern und iOS, aber nicht auf Android (einschließlich 3.x / 4.x). Irgendeine Idee warum? Wird das Bildlaufereignis nicht unterstützt?
Lahsrah
Ich habe die Dokumentation für dieses Plugin durchgesehen und es scheint ziemlich großartig zu sein. Ich werde dies bei meinem nächsten Projekt verwenden.
Der Muffin-Mann
Hier ist ein verwandtes Plugin, das wahrscheinlich genauso funktioniert: afarkas.github.io/lazysizes, außer ich glaube, es ist viel robuster und verwendet mehr von dem, was bereits vorhanden ist (zum Beispiel wird kein Platzhalter benötigt, aber Sie können es haben, wenn Sie möchten wollen).
Cregox
10

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.

Annika Backstrom
quelle
Ich frage mich, wie das mit Appelsiniis Lazyload verglichen wird. Ist es leichter? Funktioniert es in jedem Browser? Ich erinnere mich, dass Lazyload unter Chrome nicht funktioniert.
Deathlock
8

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

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

Beispiel-HTML-Code

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

Erklärt

Wenn die Seite gescrollt wird, wird jedes Bild auf der Seite überprüft.

$(this).attr('data-src') - wenn das Bild das Attribut hat data-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 Wert data-src=der Bild-URL

$(this).attr('src', source); - setzt diesen Wert in die src=

$(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="

Hastig Zusammenstellen
quelle
perfekt. segne fam 🙏
LifterCoder
5

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.

  1. Ein Ereignis ist an das Scrollen des Fensters gebunden

    $(window).scroll(myInfinteScrollFunction);
  2. Die aufgerufene Funktion prüft, ob der Bildlauf oben größer als die Fenstergröße ist

    function myInfiniteScrollFunction() {  
        if($(window).scrollTop() == $(window).height())  
        makeAjaxRequest();  
    }
  3. 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.

    $.ajax({
        type: "POST",
        url:  "myAjaxFile.php",
        data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
        success: myInfiniteLoadFunction(msg)
    });
  4. Der Ajax gibt einige (höchstwahrscheinlich JSON-formatierte) Inhalte zurück und übergibt sie an die Funktion loadnig.

Hoffe das macht Sinn.

jwegner
quelle
3

Lazy Loading Bilder von Hörer zu blättern Ereignisse Befestigung oder durch Verwendung von setInterval Herstellung ist äußerst nicht performant wie jedem Aufruf getBoundingClientRect () zwingt den Browser neu Layout der gesamten Seite und erhebliche jank auf Ihre Website vorstellen.

Verwenden Sie Lozad.js (nur 569 Byte ohne Abhängigkeiten), das IntersectionObserver verwendet , um Bilder performant zu laden.

Apoorv Saxena
quelle
Polyfill kann dynamisch hinzugefügt werden, falls keine
Browserunterstützung
Browser-Unterstützung ist heutzutage viel besser - kann ich verwenden
Hastig Zusammenstellen
1

Das Schweizer Taschenmesser zum faulen Laden von Bildern ist der ImageLoader von YUI .

Denn dieses Problem beinhaltet mehr als nur das Beobachten der Bildlaufposition.

Arnaud Meuret
quelle
0

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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

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.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

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

$('img').loadScroll(500); // in ms
vebs
quelle
0

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.

Klippe Ribaudo
quelle