L'ho notato in numerosi siti web "moderni" (ad es. Ricerca di immagini su Facebook e Google) dove le immagini sotto la piega vengono caricate solo quando l'utente scorre la pagina verso il basso quanto basta per portarle all'interno della regione visibile del riquadro di visualizzazione<img> (al momento della visualizzazione dell'origine, la pagina mostra Numero X di tag ma non vengono recuperati immediatamente dal server ). Come si chiama questa tecnica, come funziona e in quanti browser funziona. E c'è un plugin jQuery che può ottenere questo comportamento con una codifica minima.

modificare

Bonus: qualcuno può spiegare se c'è un "onScrolledIntoView" o un evento simile per gli elementi HTML. In caso contrario, come funzionano questi plugin?

Alcune delle risposte qui sono per pagine infinite. Ciò che Salman chiede è il caricamento pigro delle immagini.

Collegare

Demo

EDIT: come funzionano questi plugin?

Questa è una spiegazione semplificata:

1. Trova le dimensioni della finestra e trova la posizione di tutte le immagini e le loro dimensioni
2. Se l'immagine non rientra nelle dimensioni della finestra, sostituiscila con un segnaposto della stessa dimensione
3. Quando l'utente scorre verso il basso e la posizione dell'immagine <scroll + altezza della finestra, l'immagine viene caricata

Dave Artz di AOL ha tenuto un ottimo discorso sull'ottimizzazione alla jQuery Conference di Boston l'anno scorso. AOL utilizza uno strumento chiamato Sonar per il caricamento su richiesta in base alla posizione di scorrimento. Controllare il codice per i dettagli di come confronta scrollTop (e altri) con l'offset dell'elemento per rilevare se parte o tutto l'elemento è visibile.

jQuery Sonar

Dave parla di Sonar in queste diapositive . Il sonar inizia nella diapositiva 46, mentre la discussione generale sul "carico su richiesta" inizia nella diapositiva 33.

Ho ideato il mio metodo di base che sembra funzionare bene (finora). Ci sono probabilmente una dozzina di cose che alcuni degli script popolari affrontano a cui non ho pensato.

Nota : questa soluzione è veloce e facile da implementare ma ovviamente non eccezionale per le prestazioni. Sicuramente guarda nel nuovo Intersection Observer come menzionato da Apoorv e spiegato da developers.google se le prestazioni sono un problema.

Il 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');
        }
    })
})

Esempio di codice html

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

Ha spiegato

Quando si scorre la pagina, ogni immagine della pagina viene selezionata.

$(this).attr('data-src') - se l'immagine ha l'attributo data-src

e quanto sono lontane quelle immagini dalla parte inferiore della finestra ..

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

regola il + 100 come preferisci (- 100 per esempio)

var source = $(this).data('src');- ottiene il valore di data-src=aka l'URL dell'immagine

$(this).attr('src', source); - mette quel valore nel file src=

$(this).removeAttr('data-src'); - rimuove l'attributo data-src (così il tuo browser non spreca risorse a fare confusione con le immagini che sono già state caricate)

Aggiunta a codice esistente

Per convertire il tuo HTML, in un editor cerca e sostituisci src="consrc="" data-src="

C'è un plugin di scorrimento infinito piuttosto carino qui

Non ne ho mai programmato uno da solo, ma immagino che funzioni così.

1. Un evento è associato allo scorrimento della finestra

   $(window).scroll(myInfinteScrollFunction);

2. La funzione chiamata controlla se lo scorrimento in alto è maggiore della dimensione della finestra

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }

3. Viene effettuata una richiesta AJAX, specificando da quale risultato # iniziare, quanti raccoglierne e qualsiasi altro parametro necessario per il pull dei dati.

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });

4. L'ajax restituisce alcuni contenuti (molto probabilmente formattati JSON) e li passa alla funzione loadnig.

Spero che abbia un senso.

Il caricamento lento delle immagini collegando l'ascoltatore agli eventi di scorrimento o utilizzando setInterval è altamente non performante poiché ogni chiamata a getBoundingClientRect () costringe il browser a ridisegnare l'intera pagina e introdurrà un notevole jank al tuo sito web.

Usa Lozad.js (solo 569 byte senza dipendenze), che utilizza IntersectionObserver per caricare in modo lento le immagini in modo performante.

Il coltellino svizzero del caricamento pigro delle immagini è ImageLoader di YUI .

Perché c'è di più in questo problema che guardare semplicemente la posizione di scorrimento.

Questo collegamento funziona per me demo

1. Carica il plug-in jQuery loadScroll dopo la libreria jQuery, ma prima del tag body di chiusura.

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

2. Aggiungi le immagini nella tua pagina web utilizzando l'attributo data-src Html5. Puoi anche inserire segnaposto utilizzando il normale attributo src di img.

<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.Chiama il plug-in sui tag img e specifica la durata dell'effetto fade-in quando le tue immagini vengono visualizzate

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

Sto usando jQuery Lazy . Mi ci sono voluti circa 10 minuti per il test e un'ora o due per aggiungerli alla maggior parte dei collegamenti alle immagini su uno dei miei siti Web ( CollegeCarePackages.com ). Non ho alcun rapporto (nessuno / zero) di alcun tipo con lo sviluppatore, ma mi ha fatto risparmiare molto tempo e in pratica ha contribuito a migliorare la nostra frequenza di rimbalzo per gli utenti mobili e lo apprezzo.