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

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.

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.

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.

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

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

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

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.