0

Eu estou exibindo em minha pagina uma imagem chamada pontuacao.png, e eu gostaria de que o javascript limpe o cache e exiba a imagem e repita isso a cada 100 milissegundos.

Isso é possível? Alguém me ajudaria com um exemplo em javascript e html?

Obrigado pela ajuda.

6
  • Tenta dar uma lida aqui, vê se te ajuda: stackoverflow.com/questions/7413234/…
    – Jhonathan
    Commented 11/03/2016 às 20:35
  • 1
    A resposta pra sua pergunta é: não é possível limpar o cache do navegador usando JavaScript, os navegadores não permitem isso. Existem outras formas de conseguir o que você quer, muitas alias. Por exemplo, você poderia jogar um nome diferente pra imagem a cada atualização, assim não teria cache, ou poderia usar os parâmetros GET assim: pontuacao.png?v=1 e ir sempre alterando o valor de 1. Não sei como é o seu projeto, mas acredito também que não seja necessário uma imagem, talvez dê pra fazer com texto, o que seria melhor. Commented 11/03/2016 às 20:41
  • Vou explicar melhor ( Eu tenho uma camera fotografica que bate foto a cada 100 milisegundos e envia para meu computador, eu gostaria de pegar essas fotos em tempo real e exibir no site, ficaria como se fosse uma animação ). Mas a maquina sempre substitui a imagem anterior, então eu gostaria que o site fizesse uma atualização sem refresh e exiba a imagem atual, será que tem como fazer ? qual o jeito correto de se fazer isso ? Commented 11/03/2016 às 22:18
  • Entendi. Dá pra fazer e não é difícil, mas tenho uma dúvida. O site tem que atualizar a imagem a cada 100 milissegundos também? Se isso for em uma ambiente intranet, talvez até dê, mas se for na web, acho que não vai dar tempo de carregar a imagem. Commented 11/03/2016 às 22:25
  • Então, estou fazendo localmente. Commented 11/03/2016 às 23:11

2 Respostas 2

2

Não precisa de PHP e nem de requisições AJAX. Eu fiz isso num projeto de uma maneira bem simples. Apenas colocando querystring na própria imagem. Não precisa criar arquivo php. Apenas coloque no src da imagem um timestamp.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            function autoloadImg() {
                var src = $("#img").attr('src');

                if( src.indexOf('?') > 0 ) 
                    src = src.substring( 0, src.indexOf('?') );

                var d = new Date();
                $("#img").attr("src", src + '?time=' + d.getTime() );
            };

            $(document).ready( function(){
                setInterval("autoloadImg()", 100);
            });
        </script>
    </head>
    <body>
        <img src="imagem.png" id="img">
    </body>

</html>
0

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.
10
  • Eu acabei de fazer o teste e não apareceu nenhuma imagem dentro da div. Commented 11/03/2016 às 23:34
  • Colocou o código exatamente como está aí? A imagem tem o nome imagem.png? Está no mesmo local do get-image.php? Tem o PHP instalado no seu PC? Se a resposta pra tudo isso for sim, ela tem que aparecer. Commented 11/03/2016 às 23:44
  • Eu enviei os arquivos para meu servidor online com php e fiz tudo certinho, coloquei a imagem na mesma pasta do php. Estranho não estar aparecendo. será que o problema esta no ajax ? Commented 11/03/2016 às 23:50
  • Estava faltando um > pra fechar a tag <img> no get-image.php, já corrigi. Copia de novo e tenta. Commented 12/03/2016 às 0:09
  • Agora deu certo, mas acho que não irá dar certo com 100 milisegundos. Commented 12/03/2016 às 0:12

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 .