I have an image and I want to automatically update it using either javascript, jquery or ajax.
Until now I have the following code.
<html>
<head>
<script language="JavaScript"><!--
function refreshIt() {
if (!document.images) return;
document.images['myCam'].src = 'swt.png';
setTimeout('refreshIt()',50); // refresh every 50ms
}
//--></script>
</head>
<body onLoad=" setTimeout('refreshIt()',50)">
<img src="swt.png" name="myCam">
</body>
</html>
I think it is not working because the browser is caching the image and it is not updating the image correctly.
Can someone provide me a working example?
I have an image and I want to automatically update it using either javascript, jquery or ajax.
Until now I have the following code.
<html>
<head>
<script language="JavaScript"><!--
function refreshIt() {
if (!document.images) return;
document.images['myCam'].src = 'swt.png';
setTimeout('refreshIt()',50); // refresh every 50ms
}
//--></script>
</head>
<body onLoad=" setTimeout('refreshIt()',50)">
<img src="swt.png" name="myCam">
</body>
</html>
I think it is not working because the browser is caching the image and it is not updating the image correctly.
Can someone provide me a working example?
Share Improve this question asked Dec 10, 2011 at 21:09 glarkouglarkou 7,10112 gold badges69 silver badges122 bronze badges 3 |6 Answers
Reset to default 6This will do the trick, but it's a nightmare as far as performance.
<html>
<head>
<script language="JavaScript">
function refreshIt(element) {
setTimeout(function() {
element.src = element.src.split('?')[0] + '?' + new Date().getTime();
refreshIt(element);
}, 50); // refresh every 50ms
}
</script>
</head>
<body>
<img src="swt.png" name="myCam" onload="refreshIt(this)">
</body>
</html>
Just add a random number to the query string on every refresh. This will trick the browser into thinking this is a different resource, while the server will serve the same picture.
On top of loading a different image each time and increasing the refresh time, you should start the setTimeout again after the image has fully loaded.
function refreshIt() {
if (!document.images) return;
var img = new Image();
img.src = 'swt.png'; // use a random image
img.addEventListener('load', function () {
// you should cache the image element
document.images['myCam'].src = this.src;
setTimeout(refreshIt, 50); // refresh every 50ms
}, false);
}
}
You are setting the image source to the same string. That will not refresh the image, the browser thinks it already has that image, and won't issue another request. Try adding a random query parameter each time you want to refresh - then the browser should see the image as different resources.
Replace this line:
document.images['myCam'].src = 'swt.png';
with:
var date = new Date();
document.images['myCam'].src = 'swt.png?ts=' + date.getTime();
This will generate different link each time and cached version of the img won't be used.
And don't refresh the image every 50ms. That is way too often.
The solutions in this thread will work, but they force the browser to download the image every time the function runs. This will check for a new image without actually downloading until a new one is available. This process should be split off into a Worker for optimal performance.
<html>
<head>
<script language="JavaScript">
var lastModified;
var reader;
var http;
function init() {
http = new XMLHttpRequest();
http.onreadystatechange = function (e1) {
if (this.readyState == 4 && this.status == 200) {
reader = new FileReader();
reader.onloadend = function (e2) {
if (this.readyState == 2) {
var dataUrl = this.result;
document.getElementById("image").src = dataUrl;
}
}
reader.readAsDataURL(new Blob([http.response], {type: http.getResponseHeader("Content-Type")}));
}
}
refresh();
}
function refresh() {
http.open("GET", "http://" + window.location.hostname + "/current", true);
if (lastModified != null) http.setRequestHeader("If-Modified-Since", lastModified);
http.responseType = "blob";
http.send(null);
if (http.getResponseHeader("Last-Modified") != null) lastModified = http.getResponseHeader("Last-Modified");
setTimeout(refresh, 50);
}
</script>
</head>
<body onload="init()">
<img id="image" src="">
</body>
</html>
setTimeout(refreshIt,50), looks good to me. (but yes, 50 ms? Not a bit too much requests?) – Roko C. Buljan Commented Dec 10, 2011 at 21:14