Come caricare le immagini in modo dinamico (o pigramente) quando gli utenti le fanno scorrere per visualizzarle


97

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?


Hai bisogno solo del caricamento lento delle immagini? Se hai bisogno di un caricamento lento dei contenuti, il plug-in di scorrimento infinito è la risposta giusta
soju

@rsp @jwegner @Nicholas mi dispiace, ma non è quello che chiede Salman.
Alec Smart

@soju: sono interessato solo al caricamento pigro delle immagini; ma potrei considerare altre possibilità in un futuro (abbastanza lontano).
Salman A

21
Ti viene da chiederti perché il comportamento predefinito di un browser non è caricare solo immagini visibili. Immagina quanta larghezza di banda si sarebbe potuta risparmiare negli ultimi 18 anni se fosse stato così!
Matthew Lock

2
Sebbene comprenda il motivo del caricamento lento ... Onestamente non lo sopporto quando visito un sito che utilizza questo metodo. Il lampeggiare delle immagini mi fa impazzire! :)
Booski

Risposte:


64

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

Nell'applicazione, non funzionerebbero allo stesso modo? Uno scorrimento infinito su una singola colonna di immagini sarebbe lo stesso di un caricamento pigro, giusto? Forse sono confuso.
jwegner

1
@jwegner Lo scorrimento infinito ti consente di aggiungere nuovi elementi in fondo alla pagina quando l'utente raggiunge (o si avvicina) in fondo. Le immagini caricate in modo lento potrebbero avere segnaposto delle stesse dimensioni sulla pagina, con le immagini stesse caricate sullo scorrimento. Quindi, quest'ultimo potrebbe essere caricato lentamente senza influire sul layout della pagina.
Annika Backstrom

Funziona bene sui browser desktop e iOS ma non funziona su Android (inclusi 3.x / 4.x). Qualche idea sul perché? l'evento di scorrimento non è supportato?
lahsrah

Stavo esaminando la documentazione per questo plugin e sembra essere davvero fantastico. Lo userò nel mio prossimo progetto.
The Muffin Man

ecco un plug-in correlato, che probabilmente funziona più o meno allo stesso modo: afarkas.github.io/lazysizes tranne che credo che sia molto più robusto e utilizza più di ciò che è già presente (non c'è bisogno di segnaposto, ad esempio, ma puoi averlo se tu volere).
cregox

10

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.


Mi chiedo come si confronta con il lazyload di Appelsinii? È più leggero? Funziona su tutti i browser? Ricordo che lazyload non funziona su Chrome.
deathlock

8

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


Perfetto. bless fam 🙏
LifterCoder

5

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.


3

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.


Polyfill può essere aggiunto dinamicamente nel caso in cui il supporto del browser non sia disponibile
Apoorv Saxena

Il supporto del browser è molto migliore in questi giorni - posso usare
Hastig Zusammenstellen

1

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.


0

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

0

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.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.