Neste artigo você vai aprender a recarregar imagem da mesma URL com JS, esta técnica é utilizada para resolver problemas de cache
Fala programador(a), beleza? Bora aprender mais sobre imagens e JavaScript!
Há diversas maneiras de resolver a situação de cache de imagens
A mais simples é adicionando um recurso chamado de cache breaker
Inclusive isso pode ser aplicado em arquivos de CSS ou até de JavaScript, então é interessante aprender esta técnica
Veja um exemplo prático:
let img = new Image() newImage.src = "https://meusite.com.br/imagem.jpg"; // removendo o cache newImage.src = "https://meusite.com.br/imagem.jpg?" + new Date().getTime();;
Na última linha de código estamos adicionar o cache breaker
Basta adicionar uma ? no fim do caminho da imagem e gerar uma string aleatória, o que pode ser feita com o getTime
Isso consistem em algo do tipo:
"https://meusite.com.br/imagem.jpg?"12312371213
Forçando o carregamento da imagem novamente, sem precisar recarregar a página
Assim temos a nova versão da imagem sendo apresentada no nosso site
Conclusão
No artigo de hoje você aprendeu a como recarregar imagem da mesma URL com JavaScript
Utilizamos um recurso chamado cache breaker
Que consistem em utilizar a mesma URL, porém com uma string aleatória no fim
Isso faz uma nova chamada a imagem e a recarrega sem precisar de um refresh na página
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos