Javascript display dynamic changing image

Question

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>

@Liam he is not using jquery, why is then a possible duplicate of a jquery question? — ajimix
– ajimix, Commented Jun 26, 2017 at 9:25
The Op has tagged it jQuery. This typically means a jQuery solution is viable — Liam
– Liam, Commented Jun 26, 2017 at 9:26
Also a possible duplicate of Browser-independent way to detect when image has been loaded — Liam
– Liam, Commented Jun 26, 2017 at 9:26

ajimix · Accepted Answer · 2017-06-26 09:21:12Z

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 :)

Nineoclick · Accepted Answer · 2017-06-26 10:09:46Z

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.

Prags · Accepted Answer · 2017-06-26 09:13:03Z

-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

answered Jun 26, 2017 at 9:13

Prags

8115 silver badges17 bronze badges

6 Comments

ajimix Over a year ago

He is not using jquery, why adding a new dependency?

juanferrer Over a year ago

Well, one of the tags says jquery. If he's not using it, the tag should be removed.

Liam Over a year ago

jQuery is fine for this question, this answer though won't work. At all.

Prags Over a year ago

I used jquery, since he tagged this under jquery.

ADIN Over a year ago

@Prags I can use jQuery, thats not a problem.

|

Collectives™ on Stack Overflow

Javascript display dynamic changing image

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related