Skip to content

Instantly share code, notes, and snippets.

@sergiolopes
Last active February 11, 2024 23:54
Show Gist options
  • Save sergiolopes/e326e62a44c8095021d443401dcf5320 to your computer and use it in GitHub Desktop.
Save sergiolopes/e326e62a44c8095021d443401dcf5320 to your computer and use it in GitHub Desktop.
Lazy load de imagens beeem simples
(function(){
// como vamos usar o throttle varias vezes (no scroll e no resize),
// encapsulei essa funcionalidade numa função
function throttle(fn) {
fn.jarodei = false;
return function(){
if (fn.jarodei) return;
fn.jarodei = true;
setTimeout(function () {
fn.jarodei = false;
}, 200);
fn();
};
}
// pega todas as imagens num array e pre-calcula seu topo
var imgs = document.querySelectorAll('img[data-src]:not([src])');
var cache, alturaJanela, scrollListener, resizeListener;
function refazCache() {
cache = [];
// calcula os topos no cache
for (var i = 0; i < imgs.length; i++) {
cache.push({
topo: imgs[i].getBoundingClientRect().top + pageYOffset,
elemento: imgs[i]
});
}
// ordena o cache pela imagem mais proxima do topo
cache = cache.sort(function(a,b){
return a.topo - b.topo;
});
// cache da altura da janela
alturaJanela = window.innerHeight;
}
function carregaImagens() {
// meu while não toca no DOM, observa apenas variáveis cacheadas e o pageYOffset.
// só manipulo o DOM quando preciso realmente mexer na imagem.
while (cache.length && cache[0].topo < pageYOffset + alturaJanela + 200) {
var img = cache.shift().elemento;
img.src = img.getAttribute('data-src');
}
// removo eventos se não precisar mais deles
if (cache.length == 0) {
window.removeEventListener('scroll', scrollListener);
window.removeEventListener('resize', resizeListener);
}
}
// roda primeira vez
refazCache();
carregaImagens();
// onresize refazCache e carrega eventuais imagens
window.addEventListener('resize', resizeListener = throttle(function() {
refazCache();
carregaImagens();
}));
// onscroll só carrega imagens
window.addEventListener('scroll', scrollListener = throttle(carregaImagens));
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment