Solução em Javascript para Imagens inexistentes no servidor

publicado em 06 de Novembro de 2008

Saiba como utilizar o evento onerror do JavaScript para substituir falhas de imagem(<img>) ou até janela(window).

Com certeza você já passou por algum deste problemas:  

  • O seu site precisava de uma imagem e ela não estava mais lá.
  • A imagem não foi carregou corretamente e nem Deus sabe o motivo.
  • O seu script de UpLoad deu problema e corrompeu o arquivo antes de subir para o seu
  • servidor.
  • O nome da imagem está errado no seu banco de dados

Comigo foi assim, estava criando uma galeria de vídeos que devia exibir um screenshot(na agência chamamos de frame), mas acontece que tínhamos alguns vídeos que ainda não possuíam o screenshot. E tendo todos os dados necessários para serem exibidos no site, menos o screenshot, deveriam ser listados na HOME.

O que fazer neste caso?
Criar um código php do tipo if file_exists()?
Conheço uma opção melhor e nativa do JavaScript.

Evento OnError

Como funciona o evento OnError?
Funciona ao contrário do evento OnLoad que é a resposta de uma imagem (ou uma janela) que foi carregada com sucesso(ta aí o nome OnLoad = Carregou com Sucesso)

Assim que o browser interpretar um erro de carregamento de uma imagem(também pode ser utilizado em um window, como uma PopUp), ele executa o método OnError.

Como e onde utilizar o método OnError?

<img src="imagem-nao-existe.gif" onerror="this.onerror=null; this.src='thumb-video-default.jpg'" />