0

I want to refresh an image every 1 second. This picture is dynamically generated by my webcam, but this script sometimes display broken images when browser didnt yet load a picture before display. How to detect when picture is loaded and then change the diplay picture? I have a code like this:

    <img id="image" src="webcam.jpg">


<script>
setInterval(function() {
    var myImageElement = document.getElementById('image');
    myImageElement.src = 'webcam.jpg?rand=' + Math.random();
}, 1000);
</script>
ADIN
  • 317
  • 3
  • 14
  • 1
    `500` is half a second, by the way – Jaromanda X Jun 26 '17 at 09:11
  • Possible duplicate of [Detect image load by jQuery](https://stackoverflow.com/questions/5292819/detect-image-load-by-jquery) – Liam Jun 26 '17 at 09:22
  • @Liam he is not using jquery, why is then a possible duplicate of a jquery question? – ajimix Jun 26 '17 at 09:25
  • The Op has tagged it jQuery. This typically means a jQuery solution is viable – Liam Jun 26 '17 at 09:26
  • Also a possible duplicate of [Browser-independent way to detect when image has been loaded](https://stackoverflow.com/questions/821516/browser-independent-way-to-detect-when-image-has-been-loaded) – Liam Jun 26 '17 at 09:26

3 Answers3

4

You should wait for the image to be loaded first, before replacing it.

For this, you can use different approaches. What I usually do, is to create another image which is not visible and replace the one visible once the previous image is loaded.

Your code should look like this if you want to follow this approach:

<img id="image" src="webcam.jpg">


<script>
setInterval(function() {
    var url = 'webcam.jpg?rand=' + Math.random();
    var img = new Image();
    img.src = url;
    img.addEventListener('load', function() {
        var myImageElement = document.getElementById('image');
        myImageElement.src = url;
    });
}, 1000);
</script>

What you can also do is play with css styles to make the image hidden or visible depending on the state, but that would make your image appear and disappear which is a bit ugly...

I hope it helps :)

ajimix
  • 974
  • 7
  • 16
2

I think you can use something like this:

var _img = document.getElementById('pic'),
urlToImage = 'pic.jpg',
modified = false, lastModified = 0;

setInterval(function(){


fetch(urlToImage)
    .then(function(resp){
     var f = new File([resp],"file");
      
     switch(true) {
        case modified === false:
          lastModified = f.lastModified;
          modified = true; break;
          
          default:
          modified = false;
          if(lastModified < f.lastModified) {
            modified = true;
          }
    
      }
      
     return resp.blob();
    })
    .then(function(blobdata){
      switch(true) {
        case modified === true:
        var obj_url = URL.createObjectURL(blobdata);
       _img.src = obj_url;
      break;
      }
     
    });

},1000);
<img src="" id="pic" alt="LOCAL pic here"/>

I think that looking at lastModified time in File properties is a good way to assume image was finished written on the server.

Hope this helps.

Nineoclick
  • 804
  • 9
  • 17
-2

Try using this after loading the document

$( document ).ready(function() {
    setInterval(function() {
    var myImageElement = document.getElementById('image');
    myImageElement.src = 'webcam.jpg?rand=' + Math.random();
}, 500);
});

Hope this helps

Prags
  • 811
  • 5
  • 17