Eu vim com meu próprio método básico que parece funcionar bem (até agora). Provavelmente, há uma dúzia de coisas que alguns dos scripts populares abordam nas quais não pensei.
Observação - esta solução é rápida e fácil de implementar, mas obviamente não é ótima para desempenho. Definitivamente, olhe para o novo Intersection Observer, conforme mencionado por Apoorv e explicado por developers.google se o desempenho for um problema.
O 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');
}
})
})
Amostra de código html
<div>
<img src="" data-src="pathtoyour/image1.jpg">
<img src="" data-src="pathtoyour/image2.jpg">
<img src="" data-src="pathtoyour/image3.jpg">
</div>
Explicado
Quando a página é rolada, cada imagem na página é verificada.
$(this).attr('data-src')
- se a imagem tiver o atributo data-src
e a que distância essas imagens estão da parte inferior da janela.
$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)
ajuste + 100 para o que quiser (- 100 por exemplo)
var source = $(this).data('src');
- obtém o valor de data-src=
também conhecido como o url da imagem
$(this).attr('src', source);
- coloca esse valor no src=
$(this).removeAttr('data-src');
- remove o atributo data-src (para que seu navegador não desperdice recursos mexendo com as imagens que já foram carregadas)
Adicionando ao Código Existente
Para converter seu html, em um editor, basta pesquisar e substituir src="
porsrc="" data-src="