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