0
I’m displaying on my page an image called png., and I’d like javascript to clear the cache and display the image and repeat that every 100 milliseconds.
Is that possible? Would someone help me with a javascript and html example?
Thanks for the help.
2
It doesn’t need PHP or AJAX requests. I did it in a very simple project. Just putting querystring in the image itself. No need to create php file. Just put a timestamp in the image src.
<!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
Based on the comments of the questioner, here is one of the possibilities of achieving the desired goal simply and effectively.
Create a PHP file called 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>
function attImagem() {
$.ajax({
url: 'get-image.php',
type: 'GET',
data: 'ajax=null',
success: function(data) {
$("#imagem").html(data);
}
});
}
setInterval("attImagem()", 1000);
</script>
</html>Explaining the logic
When you enter your main file (the one containing the HTML and Javascript code), jQuery will be included and a function will be triggered every second. This function will call via AJAX (without updating the page) the get-image.php file
The get-image.php file has the function of generating a random number and assigning the name of the image as a GET parameter, making the browser understand that that image is different, and not the same that was previously loaded.
Final considerations
linha 5 of the archive get-image.php, and change the.png image to the name of your image, as well as the path (if in another directory).imagem, if you want, you can change the name, but do this both in the div ID and within the AJAX function, where you have $("#imagem").html(data);1000 (em milissegundos).I just took the test and there was no image inside the div.
Did you put the code exactly as it is? Does the image have the image name.png? Is it in the same place as get-image.php? Is PHP installed on your PC? If the answer to all this is yes, she has to appear.
I sent the files to my online server with php and did everything right, I put the image in the same php folder. Strange not to be appearing. will the problem is in ajax ?
We were missing a > to close the <img> tag in get-image.php, already fixed. Copy again and try.
Now it worked, but I don’t think it’s gonna work with 100 milliseconds.
Hm, but because?
It’s working, but the person can not notice the transition from one photo to another, so it would have to be about 100 milliseconds and so the image does not load, because it is a photo of 400 x 400 pixels, I think I can only do this using flash anyway. Your idea is great, but you have this problem.
I tested using a 400kb hard drive image and could not notice the transition. Maybe because the image comes straight from the camera, it comes with a very high quality and consequently the size should be between 1.5mb ~ 4mb. In this case you have nothing to do but use an API to decrease the size of these images and then display them. Or look for another method.
No, I created an image in photoshop of 400 x 400 pixels and played on the server, then I created a different one with the same name and played on the server and looked and I could notice the transition, I can make a video and send you, you want ?
Let’s go continue this discussion in chat.
Browser other questions tagged javascript
You are not signed in. Login or sign up in order to post.
Try to read it here, get help: http://stackoverflow.com/questions/7413234/how-to-prevent-caching-of-my-javascript-file
– Jhonathan
The answer to your question is: it is not possible to clear the browser cache using Javascript, browsers do not allow this. There are other ways to get what you want, many aliases. For example, you could play a different name for the image with each update, so you wouldn’t have cache, or you could use the GET parameters like this: scoring.png? v=1 and keep on changing the value of 1. I don’t know what your project is like, but I also believe that you don’t need an image, maybe you can do it with text, which would be better.
– Clayderson Ferreira
I will explain it better ( I have a photographic camera that snaps every 100 milliseconds and sends it to my computer, I would like to take these photos in real time and display on the site, would look like an animation ). But the machine always replaces the previous image, so I would like the site to do an update without refresh and display the current image, is there any way to do it ? What’s the right way to do it ?
– Desenvolvedor
I get it. I can do it and it’s not hard, but I have a question. Does the site have to update the image every 100 milliseconds as well? If this is in an intranet environment, maybe we can, but if it’s on the web, I don’t think we’ll have time to upload the image.
– Clayderson Ferreira
So I’m doing it locally.
– Desenvolvedor
It doesn’t seem logical, repeating a process like this every 100 milliseconds. If you can explain the context of this, the reason, etc., you can find a more appropriate solution. But if you want to continue like this, this can help to give an idea of how to always display the new image: http://answall.com/a/115436/4793
– Daniel Omine