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?

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

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.

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

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.

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.

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

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

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

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.