Com base nos comentários do autor da pergunta, aqui está uma das possibilidades de atingir o objetivo desejado de forma simples e eficaz.
Crie um arquivo PHP chamado get-image.php
e coloque o seguinte código dentro dele
<?php
if (isset($_GET['ajax'])) {
$numRand = rand();
echo "<img src='imagem.png?{$numRand}'>";
}
Agora, crie um arquivo PHP ou HTML, com o nome que preferir e coloque o seguinte código
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Burlando cache do navegador com AJAX</title>
</head>
<body>
<div id="imagem"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function attImagem() {
$.ajax({
url: 'get-image.php',
type: 'GET',
data: 'ajax=null',
success: function(data) {
$("#imagem").html(data);
}
});
}
setInterval("attImagem()", 1000);
</script>
</html>
Explicando a lógica
Quando você entrar no seu arquivo principal (o que contem o código HTML e JavaScript), será incluído o jQuery e, uma função que será disparada a cada segundo. Essa função irá chamar via AJAX (sem atualizar a página) o arquivo get-image.php
O arquivo get-image.php tem a função de gerar um número aleatório e atribuir ao nome da imagem como um parâmetro GET, fazendo o navegador entender que aquela imagem é outra, e não a mesma que foi carregada anteriormente.
Considerações finais
- Se desejar alterar o nome da imagem que será solicitada, procure a
linha 5
do arquivo get-image.php
, e altere o imagem.png para o nome da sua imagem, bem como o caminho (caso esteja em outro diretório).
- No script acima, a imagem será exibida na div chamada
imagem
, se quiser, pode alterar o nome, mas faça isso tanto no ID da div, quanto dentro da função AJAX, onde tem $("#imagem").html(data);
- Para aumentar ou diminuir o intervalo entre as atualizações, altere o valor
1000 (em milissegundos)
.
- Se tratando de uma imagem, colocar um valor muito baixo pode fazer com que a imagem não seja exibida e também poderá sobrecarregar o servidor onde a imagem esteja hospedada.