6

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();
2

3 Respostas 3

2
+25

Tentar manipular o src das tags <img> antes que estas sejam carregadas no browser do usuário é como tentar manipular algo que não existe.

Acredito que a melhor estratégia para o seu caso seria fazer o inverso do que você descreveu, ou seja, enviar todas todas as tags <img> com seu placeholder (o mais leve possível), e em seguida tentar carregar de forma assíncrona as imagens mais pesadas.

1
  • Eu sei que colocando um script logo após uma tag <img>, eu consigo interagir com ela. A questão é se tem como saber que essas imagens foram encontradas enquanto o DOM é construído e já substituir elas, como por exemplo criar um evento que é disparado sempre que uma imagem é encontrada, De qualquer forma, obrigado pela sugestão! 6/01/2021 às 9:43
0

Primeiramente altere a propriedade de todas as suas imagens de src para data-src e adicione uma nova src com o seu placeholder.

Altere o script de load da pagina para o seguinte

const images = document.querySelectorAll("img");

const imagesNotCompleted = images.filter(x => !x.complete);

const isRequired = imagesNotCompleted.length !== 0;

if (isRequired) {
  window.onload = () => {
    const script = document.createElement("script");
    script.src = "loader.js";
    document.querySelector("body").appendChild(script);
  };
}

Na implementação do loader

const imageLoader = (entries) => {

  for(let el of entries.filter(x => x.isIntersecting)){
    el.target.src = el.target.dataset.src;
    observer.unobserve(e.target);
  }
  
};

const observer = new IntersectionObserver(imageLoader, {
  threshold: 0.1,
});

const observe = () => {
  const images = document.querySelectorAll("img");
  
  images.filter(x => x.dataset.src)
    .forEach(x => observer.observe(x));
};

observe();

Veja se isso funciona

-2

Esse exemplo pode te ajudar, a função getInView pega os elementos que estão dentro do scroll no momento, pode fazer isso para carregar as imagens dinamicamente e depois setar uma propriedade direito no html como 'isLoaded=true' ai nos proximos scrolls você pode verificar apenas as imagens que ainda estão isLoaded false, impedindo que seja feito o load das imagens em cada scroll do usuario.

function getInView(event) {
  const scrolling = event.target.scrollingElement;

  const Iniview = scrolling.scrollTop;
  const finalView = scrolling.scrollTop + scrolling.clientHeight;

  const spans = Array.from(document.querySelectorAll('span'));
  const spansInViewNow = spans
    //.filter(x => !x.isLoaded)
    .filter(x => x.offsetTop + x.offsetHeight >= Iniview &&
      x.offsetTop + x.offsetHeight <= finalView)
    .map(x => x.innerText);
    //.map(x => { x.isLoaded = true; return x.innerText; });

  console.log(spansInViewNow);
  return spansInViewNow;
}

const bodyElement = document.querySelector('body');
bodyElement.onscroll = getInView;
.container {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<html>

<body class='container'>
  <span>1</span>

  <span>2</span>

  <span>3</span>
</body>

</html>

3
  • Eu já estou usando o Intersection Observer API para fazer isso, o problema é encontrar uma forma de substituir os src das imagens conforme o DOM as identifica no carregamento da página. 7/01/2021 às 10:03
  • @WagnerKramer porquê não colocar diretamente no html todas as imagens com src = placeholder.svg e usar um atributo data-src como forma de obter o src original da imagem quando o browser ser carregado e ir alterando o src com a lib do Observer? 7/01/2021 às 12:16
  • Farei uma resposta sugerindo isso 7/01/2021 às 12:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .