3

Eu gostaria de perguntar para alguém que seja entendido em javascript puro, o por quê de estar acontecendo isso.

Tenho um código que só deveria mostrar a imagem quando ela for carregada (onload), só que a função só dispara quando eu seto o onload direto na tag img, quando coloco em um bloco/arquivo javascript não funciona...

se eu faço: <img id="imagem" src="linkDaImagem" onload="this.style.display = 'block'" />

a imagem aparece ao carregar.

Mas se eu faço assim, em um bloco script ou arquivo externo, não funciona:

document.getElementById('imagem').addEventListener("load", function(){
      this.style.display = 'block';       
});

Por que isso acontece, gente? Tem alguma solução para isso?

Sei que via Jquery é possível, mas peço a solução em js puro, pois estou aprendendo ele, e tenho essa dúvida...

Obrigado à todos que ajudarem, até mais!

1 Resposta 1

4

Há algumas limitações relacionadas com o problema que descreves, incoerências entre browsers e o facto de o HTML começar a carregar a imagem em cache antes mesmo de o JavaScript ser lido e juntar esse addEventListener.

Por essas alternativas são:

  • ir 100% HTML
  • ir 100% JavaScript

Com HTML é como referiste, junta o atributo onload e a coisa vai correr bem:

onload="this.style.display = 'block'"

Com JavaScript podes usar a API HTML 5 new Image(); e substiruir o elemento. Assim tens controle sobre o evento onload no JavaScript:

var img = document.getElementById('imagem');
var el = new Image();
img.parentElement.replaceChild(el, img);
el.onload = function() {
    this.style.opacity = 1;
};
el.src = "linkDaImagem";

Exemplo: https://jsfiddle.net/4mapbkq7/

Coisas a ter em conta:

  • usando HTML é melhor para SEO e casos que queiras que o Google indexe a página
  • mudar a src de um img pode causar mudanças no layout da página se as dimensões não estiverem defenidas.
  • usando a versão JavaScript ele vai quebrar auscultadores de eventos que possam estar associados à img original que vai ser removida, usa delegação para evitar bugs
  • carregando a imagem via JavaScript acelera o carregamento da página pois o browser vai dar a página como completa mais cedo.

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 .