Question

I have been finding a solution to my problem but haven’t found what I’m looking for.

Well, I have a webpage with “live images” taken from a webcam every 5 seconds, I upload the image using FTP and replace the old image with the new image. My problem is that sometimes the FTP is in the middle of the transfer and the image gets truncated, so I want to say something like if image is load display if not don’t “refresh” image. Here is my code:

setInterval(function(){
   $("#imagerefresh").attr("src", "images/image_1.jpg?"+new Date().getTime()).load();
},5000);

I found a lot of posts that they asked how yo check if image is loaded, and tried them but they just execute once, like this one:

setInterval(function(){
   $("#imagerefresh").load(function(){
      $("#imagerefresh").attr("src", "images/image_1.jpg?"+new Date().getTime());
   })
 },5000);

Answer 1

Try this:

setInterval(function() {
    $("#imagerefresh").load(function() {
        console.log("image loaded correctly");
    }).error(function() {
        console.log("error loading image");
        $(this).unbind("error").attr("src", $(this).attr("src"));
    }).attr("src", "images/image_1.jpg?" + new Date().getTime());
})
}, 5000);​