wake-up-neo.net

So laden Sie Bilder dynamisch (oder träge), wenn Benutzer sie anzeigen

Ich habe dies bei zahlreichen "modernen" Websites (z. B. Facebook- und Google-Bildersuche) festgestellt, bei denen die Bilder unterhalb der Falzfunktion nur dann geladen werden, wenn der Benutzer die Seite so weit herunterrollt, dass sie in den sichtbaren Bereich des Ansichtsfensters ( bei Ansichtsquelle) gelangen Seite zeigt X Anzahl der <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?

92
Salman A

Einige der Antworten sind für eine unendliche Seite. Was Salman fragt, ist das langsame Laden von Bildern.

Plugin

Demo

EDIT: Wie funktionieren diese Plugins?

Dies ist eine vereinfachte Erklärung:

  1. Finden Sie die Fenstergröße und finden Sie die Position aller Bilder und deren Größe
  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 blättert und die Position des Bildes <Bildlauf + Fensterhöhe> ist, wird das Bild geladen
62
Alec Smart

Dave Artz von AOL hat letztes Jahr auf der jQuery Conference Boston einen großartigen Vortrag zur Optimierung gehalten. AOL verwendet ein Werkzeug namens Sonar für das Laden nach Bedarf, basierend auf der Bildlaufposition. Überprüfen Sie den Code auf die Details, wie scrollTop (und andere) mit dem Elementversatz verglichen werden, um festzustellen, ob ein Teil oder das gesamte Element sichtbar ist.

jQuery Sonar

Dave spricht über Sonar in diese Folien . Das Sonar startet auf der Folie 46, während die allgemeine "Last bei Bedarf" -Diskussion auf der Folie 33 beginnt.

10

Ich fand meine eigene grundlegende Methode, die (bisher) gut zu funktionieren scheint. Es gibt wahrscheinlich ein Dutzend Dinge, an die einige der populären Skripte nicht gedacht haben.

Hinweis - Diese Lösung ist schnell und einfach zu implementieren, aber für die Leistung natürlich nicht besonders gut. Schauen Sie sich auf jeden Fall den neuen Intersection Observer an, der von Apoorv erwähnt und von developers.google erklärt wurde, wenn es um Leistung geht.

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 data-src hat

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'); - Ermittelt den Wert von data-src=, auch bekannt als die Bild-URL

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

$(this).removeAttr('data-src'); - entfernt das data-src-Attribut (damit Ihr Browser keine Ressourcen verschwendet, die mit den bereits geladenen Bildern in Konflikt geraten)

Hinzufügen zu vorhandenem Code

Um Ihr HTML zu konvertieren, suchen und ersetzen Sie in einem Editor einfach src=" Durch src="" data-src=".

Es gibt ein ziemlich schönes unendliches Scroll-Plugin hier

Ich habe selbst noch nie einen programmiert, aber ich könnte mir vorstellen, dass es so funktioniert.

  1. Ein Ereignis ist an das Bildlauffenster 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 erfolgt eine Anforderung AJAX, in der angegeben wird, zu welchem ​​Ergebnis # zu beginnen, wie viele zu greifen sind und welche anderen Parameter für den Datenabruf 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.

5
jwegner

Das langsame Laden von Bildern durch Anhängen des Listeners an Bildlaufereignisse oder durch Verwenden von setInterval ist äußerst unperformant, da jeder Aufruf von getBoundingClientRect () den Browser zwingt, Layout neu zu gestalten die gesamte Seite zu erstellen, und erhebliche Auswirkungen hat jank auf deine website.

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

2
Apoorv Saxena

Das Schweizer Taschenmesser für Image Lazy Loading ist YUI ImageLoader .

Denn dieses Problem hat mehr zu bieten, als nur die Bildlaufposition zu beobachten.

1
Arnaud Meuret

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 mit dem Attribut Html5 data-src in Ihre Webseite ein. Sie können mit dem regulären img-Attribut src auch Platzhalter 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 .__ an. FadeIn-Effekt, wenn Ihre Bilder sichtbar werden

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

Ich benutze jQuery Lazy . Ich habe etwa 10 Minuten gebraucht, um zu testen, und ein oder zwei Stunden, um die meisten Bildlinks auf einer meiner Websites ( CampusCube ) hinzuzufügen. Ich habe NO (none/zero) Beziehung zu dem Entwickler, aber es hat mir viel Zeit gespart und im Wesentlichen dazu beigetragen, unsere Absprungrate für mobile Benutzer zu verbessern, und ich schätze das sehr.

0
Cliff Ribaudo