Question

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="test.css">

</head>

<body>

    <img name="img" src="http://4.bp.blogspot.com/-Jdj5JKTA1xQ/T-BzvrQDZhI/AAAAAAAABhs/bX0TUEFb3Ck/s1600/windows-help1.png" width="90%" height="100%">


    <script>
        setInterval(function () {
            var images = document.getElementsByTagName('img'); // get all img DOM objects
            for (var i = 0; i < images.length; i++) {
                images[i].src = images[i].src.replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
            }
        }, 1000);

    </script>
</body>

</html>

In Chrome I can see my picture refresh every second, but in IE version 9 it does not work. It does not refresh after displaying one time. How can I solve this problem, or is there any other way to do it?

Was it helpful?

Solution

The code, as is, should work. Also in IE 9.

Try something like this to verify that the scr attribute actually get changed:

Sample fiddle

JSFiddle does not work well in IE 8 – which I tested on, but this should give you a viewable sample for IE:

Sample fiddle

HTML:

<img src="http://jsfiddle.net/img/initializing.png?time=123" />
<img src="http://jsfiddle.net/img/initializing.png?time=123" />
<br/>
Img0.src: <input type="text" /><br/>
Img1.src: <input type="text" /><br />
Counter : <input type="text" />

CSS:

input {
    width : 500px;
}

Javascript:

var img = document.getElementsByTagName('img');
var inp = document.getElementsByTagName('input');
var cnt = 0;

setInterval(function () {
    inp[2].value = ++cnt;
    for (var i = 0; i < img.length; i++) {
        img[i].src = img[i].src
            .replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
        inp[i].value = img[i].src;
    }
}, 1000);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top