Como checar se imagem foi carregada com JavaScript

Neste artigo você vai aprender a como checar se imagem foi carregada com JavaScript, vem conferir como é simples fazer isso!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Introdução

Em muitos projetos web, as imagens desempenham um papel crucial na experiência do usuário e no design do site.

No entanto, às vezes, o carregamento de imagens pode ser lento ou encontrar problemas, como imagens quebradas ou ausentes.

Neste artigo, vamos explorar como checar se uma imagem foi carregada com JavaScript, garantindo que a experiência do usuário seja aprimorada e evitando problemas de exibição.

O evento onload

Uma maneira simples de checar se imagem foi carregada com JavaScript é usar o evento onload.

O evento onload é disparado quando um recurso, como uma imagem, termina de carregar.

Vamos ver um exemplo de como utilizar o evento onload:

const img = new Image();
img.src = 'https://exemplo.com/minha-imagem.jpg';

img.onload = function() {
  console.log('A imagem foi carregada com sucesso.');
};

img.onerror = function() {
  console.log('Ocorreu um erro ao carregar a imagem.');
};

Neste exemplo, criamos um novo objeto Image e atribuímos a URL da imagem ao atributo src.

Em seguida, adicionamos um manipulador de eventos onload, que é chamado quando a imagem é carregada com sucesso.

Também adicionamos um manipulador de eventos onerror para lidar com possíveis erros no carregamento da imagem.

Usando Promises

Outra abordagem para checar se uma imagem foi carregada com JavaScript é usar Promises. As Promises permitem escrever um código assíncrono mais limpo e fácil de entender.

Veja um exemplo:

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;

    img.onload = function() {
      resolve(img);
    };

    img.onerror = function() {
      reject(new Error('Ocorreu um erro ao carregar a imagem.'));
    };
  });
}

loadImage('https://exemplo.com/minha-imagem.jpg')
  .then(img => {
    console.log('A imagem foi carregada com sucesso:', img);
  })
  .catch(error => {
    console.error('Ocorreu um erro ao carregar a imagem:', error);
  });

No exemplo acima, criamos uma função loadImage que recebe uma URL e retorna uma Promise.

A Promise é resolvida com sucesso quando a imagem é carregada e rejeitada quando ocorre um erro.

Verificando o carregamento de várias imagens

Em alguns casos, pode ser necessário checar se várias imagens foram carregadas antes de prosseguir com outras operações. Neste cenário, podemos utilizar a função Promise.all.

Veja um exemplo:

const urls = [
  'https://exemplo.com/imagem1.jpg',
  'https://exemplo.com/imagem2.jpg',
  'https://exemplo.com/imagem3.jpg'
];

Promise.all(urls.map(loadImage))
  .then(images => {
    console.log('Todas as imagens foram carregadas com sucesso:', images);
  })
  .catch(error => {
    console.error('Ocorreu um erro ao carregar uma ou mais imagens:', error);
  });

Neste exemplo, usamos a função loadImage criada anteriormente e a função Promise.all para checar se todas as imagens em um array de URLs foram carregadas com sucesso.

A função Promise.all recebe um array de Promises e retorna uma nova Promise que é resolvida quando todas as Promises no array são resolvidas.

Se alguma das Promises for rejeitada, a Promise.all também será rejeitada.

Lidando com imagens em elementos HTML

Se você já tem elementos de imagem em seu HTML e deseja verificar se eles foram carregados, pode usar um método semelhante aos exemplos anteriores:

<img id="minha-imagem" src="https://exemplo.com/minha-imagem.jpg" alt="Exemplo de imagem" />

const imgElement = document.getElementById('minha-imagem');

imgElement.onload = function() {
  console.log('A imagem foi carregada com sucesso.');
};

imgElement.onerror = function() {
  console.log('Ocorreu um erro ao carregar a imagem.');
};

Neste exemplo, selecionamos o elemento de imagem no HTML usando getElementById e adicionamos manipuladores de eventos onload e onerror, como nos exemplos anteriores.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Checar se uma imagem foi carregada com JavaScript é fundamental para garantir que os usuários tenham uma experiência de navegação agradável e sem problemas com as imagens em seu site.

Neste artigo, exploramos diferentes abordagens para verificar o carregamento das imagens, como o uso do evento onload, Promises e a função Promise.all.

Essas técnicas podem ser facilmente adaptadas para atender às necessidades específicas de seu projeto e melhorar a experiência do usuário.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Explica um caso que os exemplos anteriores deixam passar: quando a imagem já está no cache do navegador, o onload pode nem disparar, porque ela carrega antes de você registrar o evento

Aí o console fica mudo e parece que deu errado, mas na real a imagem já tava lá

Pra cobrir isso tu checa a propriedade complete do elemento, junto com naturalWidth pra saber se carregou de verdade (e não uma imagem quebrada)

[bloco de código] com algo no espírito:

const imgElement = document.getElementById(‘minha-imagem’)

if (imgElement.complete && imgElement.naturalWidth !== 0) { console.log(‘A imagem já estava carregada’) } else { imgElement.onload = function() { console.log(‘A imagem foi carregada com sucesso’) } imgElement.onerror = function() { console.log(‘Ocorreu um erro ao carregar a imagem’) } }

Explica o porquê: complete diz que o carregamento terminou, e naturalWidth diferente de zero confirma que veio uma imagem válida, não um quadro quebrado

Foca no cenário de imagem quebrada ou ausente, que a introdução do post promete mas o corpo não trata direto

Mostra que o onerror é o gancho principal pra isso, e reforça o truque do naturalWidth igual a zero pra pegar imagem que ‘carregou’ mas veio vazia

Um caso de uso prático: trocar a imagem quebrada por uma de fallback

[bloco de código] no espírito:

imgElement.onerror = function() { imgElement.src = ‘https://exemplo.com/imagem-fallback.jpg’ }

Explica o porquê antes do como: em vez de deixar o ícone de imagem quebrada aparecer pro usuário, tu detecta o erro e já mostra uma alternativa

Um bloco de FAQ com 3 a 4 perguntas diretas, cada resposta funcionando sozinha como snippet:

Como saber se uma imagem já foi carregada em JavaScript? Resposta curta: use a propriedade complete do elemento junto com naturalWidth, pois o onload pode não disparar se a imagem já estiver em cache

Qual a diferença entre onload e onerror? onload roda quando a imagem termina de carregar com sucesso, onerror roda quando o carregamento falha (imagem quebrada, URL errada, rede caída)

Dá pra checar várias imagens de uma vez? Sim, com Promise.all envolvendo cada carregamento numa Promise, como no exemplo da seção de várias imagens

Cada resposta em 2 a 3 frases, sem enrolação