I'm displaying on my page an image called punctuation.png , and I'd like javascript to clear the cache and display the image and repeat this every 100 milliseconds.
Is this possible? Would anyone help me with an example in javascript and html?
Thanks for the help.
You do not need PHP or AJAX requests. I did this on a project in a very simple way. Just putting querystring in the image itself. You do not need to create a php file. Just put in the image src a 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>functionautoloadImg(){varsrc=$("#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>
Based on the comments of the author of the question, here is one of the possibilities to achieve the desired goal simply and effectively.
Create a PHP file named get-image.php and put the following code inside it
<?php
if (isset($_GET['ajax'])) {
$numRand = rand();
echo "<img src='imagem.png?{$numRand}'>";
}
Now, create a PHP or HTML file with the name you prefer and put the following code
<!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>functionattImagem(){$.ajax({url:'get-image.php',type:'GET',data:'ajax=null',success:function(data){$("#imagem").html(data);
}
});
}
setInterval("attImagem()", 1000);
</script>
</html>Explaining logic
When you enter your main file (which contains the HTML and JavaScript code), jQuery is included, and a function that will be fired every second. This function will call via AJAX (without updating the page) the file get-image.php
The get-image.php file has the function of generating a random number and assigning the image name as a GET parameter, making the browser understand that the image is another one, not the one that was previously loaded.
Final considerations
linha 5 of the get-image.php file, and change the image.png to the name of your image, as well as the path (if it is in another directory). imagem , if you want, you can change the name, but do so both in the ID of the div and inside the AJAX function, where%
$("#imagem").html(data); .