Estou fazendo um lazy loader em javascript puro, atualmente coloco meu script embed no fim do HTML que identifica as imagens e, caso elas não estejam prontas (por exemplo carregadas da cache), este muda a imagem para um placeholder mais leve e quando o usuário chega na imagem é carregada a imagem original.
Gostaria de saber se existe uma forma de eu achar as tags img enquanto o DOM é carregado, para conseguir substituir o src delas pelo meu placeholder antes mesmo de ser iniciada a solicitação pela imagem original (atualmente as solicitações que não estão em cache aparecem no inspetor como canceladas).
Atualmente utilizo o seguinte no fim da página para encontrar as imagens.
<script>
const srcs = Array();
const srcSets = Array();
const images = document.querySelectorAll("img");
let isRequired = false;
let index = 0;
for (let i = 0; i < images.length; i++) {
if (!images[i].complete) {
isRequired = true;
srcs.push(images[i].src);
srcSets.push(images[i].srcset);
images[i].src = "placeholder.svg"; /// Usar o placeholder de sua escolha, de preferência um SVG pré conectado
images[i].srcset = "";
images[i].setAttribute("index", index);
index++;
}
}
if (isRequired) {
window.onload = () => {
const script = document.createElement("script");
script.src = "loader.js";
document.querySelector("body").appendChild(script);
};
}
</script>
E o "loader.js" que é o responsável por carregar as imagens conforme elas aparecem na tela usando a Intersection Observer API nativa.
const imageLoader = (entries) => {
entries.map((e) => {
if (e.isIntersecting) {
const i = e.target.getAttribute("index");
e.target.src = srcs[i];
e.target.srcset = srcSets[i];
observer.unobserve(e.target);
}
});
};
const observer = new IntersectionObserver(imageLoader, {
threshold: 0.1,
});
const observe = () => {
const images = document.querySelectorAll("img");
for (let i = 0; i < images.length; i++) {
if (images[i].getAttribute("index") !== null) {
observer.observe(images[i]);
}
}
};
observe();
loading
dos elementos<img>
, que permite configurar o lazy loading nativamente. No entanto, trata-se de uma adição recente.