Como Evitar Cache de Imagens Dinâmicas do MRTG Usando JavaScript

---

Quando você está criando um dashboard que exibe imagens dinâmicas geradas por ferramentas como o MRTG, é comum que o navegador utilize imagens em cache, o que pode impedir que as informações mais recentes sejam mostradas. Neste post, você vai aprender como forçar o navegador a carregar sempre a versão mais atual das imagens, evitando o cache por meio de uma simples implementação em JavaScript.

Problema com Cache de Imagens no Dashboard

Por padrão, navegadores tendem a armazenar em cache recursos como imagens para melhorar a performance. No entanto, em um ambiente onde as imagens são geradas dinamicamente e atualizadas com frequência, como no MRTG, isso pode ser um problema, pois o navegador pode continuar exibindo versões antigas das imagens.

Solução

Uma maneira de contornar esse problema é adicionar um parâmetro dinâmico à URL da imagem. Isso faz com que o navegador interprete a URL como única, forçando o recarregamento da imagem sempre que ela for atualizada.

Implementação com JavaScript Usando Classe

Se você tem várias imagens em seu dashboard, pode usar uma classe para aplicar essa lógica a todas elas. Aqui está um exemplo prático de como fazer isso:

<img class="mrtgImage" src="mrtg_image1.png" alt="MRTG Image 1" />
<img class="mrtgImage" src="mrtg_image2.png" alt="MRTG Image 2" />
<img class="mrtgImage" src="mrtg_image3.png" alt="MRTG Image 3" />

<script>
    // Função para evitar cache adicionando um timestamp à URL de cada imagem com a classe mrtgImage
    function refreshImages() {
        const images = document.querySelectorAll(".mrtgImage");
        const timestamp = new Date().getTime();
        images.forEach(img => {
            // Adiciona o timestamp à URL da imagem
            const src = img.getAttribute("src");
            img.src = src.split("?")[0] + "?t=" + timestamp;
        });
    }

    // Atualiza as imagens a cada 60 segundos (60000 milissegundos)
    setInterval(refreshImages, 60000);

    // Carrega as imagens sem cache ao carregar a página
    window.onload = refreshImages;
</script>

Como Funciona:

• A função refreshImages() adiciona um parâmetro ?t= seguido do timestamp (tempo atual) à URL de cada imagem, garantindo que o navegador sempre carregue a versão mais recente.
• Utilizamos document.querySelectorAll(".mrtgImage") para selecionar todas as imagens com a classe "mrtgImage".
• Um setInterval garante que as imagens sejam atualizadas a cada 60 segundos, ou conforme a necessidade.

Conclusão

Com esse simples ajuste, você pode evitar o cache de imagens no seu dashboard de MRTG, garantindo que os dados mais recentes estejam sempre visíveis. Essa solução é leve e funciona em qualquer navegador, sem a necessidade de alterar configurações no servidor.