How to check if images are loaded?

Question

I am using mjpeg format to display stream from IP-camera. The problems is that stream is unstable and i don't know when exactly it starts and so i need somehow check image url if there is for example > 5 images and then load it. Something like this, but check url before adding it to the page.

At the moment i have:

$('#image_div').append('<img width="320" height="240" border="0" src="http://'+url+':'+port+'/?up" id="image">');
$('#image').load(function(){
    console.log($(this));
});

In console it looks like: https://i.stack.imgur.com/iM88J.png

If there is no stream i receiving only one of this. So i need somehow check it before adding.

How do you mean "check image url if there are > 5 images". Do you want to read a remote HTML page and count IMG tags? — David Hellsing, Sep 06 '12 at 12:59
So you mean "check **stream** URL"? Can you post some more markup/code? — David Hellsing, Sep 06 '12 at 13:19

score 1 · Answer 1 · answered Sep 06 '12 at 13:03

1

This is a great plugin that i've used in the past. For the most part it worked smoothly across most browsers.

https://github.com/desandro/imagesloaded

answered Sep 06 '12 at 13:03

samisadaka

91
1
6

score 0 · Answer 2 · answered Sep 06 '12 at 13:49

0

I’m not sure what this does:

$('#image_div').append('<img src="http://'+url+':'+port+'/?up">');

I have never worked with mjpeg and javascript, but I assume this URL is a stream of jpegs.

Anyway, you can create image objects, load them into memory and display them whenever you want. F.ex:

var cache = [];
$(new Image()).attr('src', 'http://'+url+':'+port+'/?up').load(function() {
    // image loaded but not injected
    cache.push(this);
    if ( cache.length == 5 ) {
        // 5 images loaded, do something with cache array
    }
});

Does this answer your question?

answered Sep 06 '12 at 13:49

David Hellsing

106,495
44
176
212

If there loaded 5 images i need just return true and stop function. Can you help me with these if it is not difficult for youю – Andresh Podzimovsky Sep 06 '12 at 14:06
I’m not sure, but try `$(this).unbind('load');` – David Hellsing Sep 06 '12 at 14:07

How to check if images are loaded?

2 Answers2