Updating images with Java Script and or jquery

Question

I'm having trouble trying to refresh a camera image. The first image loads fine, it's the following image(s) that do not load. The image does refresh however when refreshed in a browser so it should be just a matter of java scripting. I have tried several scripts before posting my question. I can make this script work for other static images which leads me to believe the server that is offering up the image is somehow denying the image refresh. The latest script being...

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body> 
<script type="text/javascript">
<!--
var refreshrate=1;                 //SECONDS BETWEEN REFRESH
var image="http://71.33.210.85/cam0.jpg";     //IMAGE NAME
var imgheight=240;                   //IMAGE HEIGHT
var imgwidth=320;                 //IMAGE WIDTH
function refresh(){
document.images["pic"].src=image+"?"+new Date();
setTimeout('refresh()', refreshrate*1000);}
document.write('<IMG SRC="'+image+'" ALT="Alternate Text" NAME="pic" ID="pic"        WIDTH="'+imgwidth+'" HEIGHT="'+imgheight+'" STYLE="border: 1px solid Black;">');
if(document.images)window.onload=refresh;
// -->
</script>
</body>
</html>

take a look at http://stackoverflow.com/questions/165253/javascript-how-to-force-image-not-to-use-the-browser-cache — RafH, Oct 08 '13 at 21:19
also document.write executed after the page has finished loading will overwrite the page, or write a new page, or not work - not sure if you want to override it each time or add a new image — James Daly, Oct 08 '13 at 21:20

score 0 · Answer 1 · answered Oct 08 '13 at 21:21

Perhaps the format of the date that is pasted behind the url is not what the code is expecting serverside. (Although you probably anticipated on that)

document.images["pic"].src=image+"?"+new Date();

running this in console gives me

"http://71.33.210.85/cam0.jpgTue Oct 08 2013 23:17:01 GMT+0200 (Romance (zomertijd))"

score 0 · Answer 2 · answered Oct 08 '13 at 22:17

0

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).on('ready', init);
        function init(){
            var i = 0;
            imageSrc = 'http://somedomain/project/';
            $('#imageDiv').append('<img src="'+imageSrc+i+'.png" alt="some text">');
            setTimeout(function(){
                i++;
                $(document).find('#imageDiv img').attr('src', imageSrc+i+'.png');

            }, 3000);
        }
    </script>
</head>
<body>`enter code here`
<div id="imageDiv">

</div>
</body>
</html>

can you try this script,

answered Oct 08 '13 at 22:17

sunnycr4

26
2

Thanks for the quick responses...I tried RafH's suggestion at solution but this refreshes the same image. and when I try Sunnycr4's suggestion, the first image never loads. If you view this image at http://71.33.210.85/cam0.jpg you can refresh this image by doing a browser refresh, however every script I have tried to update the image without refreshing the page has fallen short. Caching? not sure whats preventing it from being updated. – user2860270 Oct 09 '13 at 22:16
I also notice when inspecting the element in chrome, the first image loads, then the subsequent images come back as GET "error 400 bad request text/plain" the first image loads with GET "200 OK image/jpeg" – user2860270 Oct 09 '13 at 23:08

Updating images with Java Script and or jquery

2 Answers2