detecting img loads in javascript

Question

I have a function where I get the img src value as the parameter, what I want to do is check to see if that image loads with a 200 ok or 404/some other error. If it gets a 200 ok, then I want to inject an img tag with that src into the DOM(I reason that during checking,it also gets loaded into the browser cache and injecting that img tag into the DOM loads it from the cache ). I tried with a simple snippet of code as follows :

function checkImage(src)
{
   var img = new Image(),
   tag = '<img src="'+src+'" />',
   alt = '<span>sorry,image broken</span>';
   img.onload = function(){
       $('.some-container').html(tag);
   };
   img.onerror = function(){
      $('.some-container').html(alt);
   };
   img.src = src;
}

It worked fine in chrome, but went havok in firefox and ie(both of them are firing only the error event no matter whether the image loaded fine or broke). Instead of using onload and onerror, I tried it using jquery like :

$(img).load(...).error(...).attr('src',url);

$(img).on('load',...).on('error',...).attr('src',url);

$('<img />').load(...).error(...).attr('src',url);

$('<img />').on('load',...).on('error',...).attr('src',url);

and even tried the jquery.imagesLoaded plugin by desandro(https://github.com/desandro/imagesloaded) like :

$(img).imagesLoaded().done(...).fail(...);

$(img).imagesLoaded().progress(function(instance,image){
    image.isLoaded?alert('loaded'):alert('broken');
});

$('<img />').imagesLoaded().done(...).fail(...).attr('src',url);

$('<img />').imagesLoaded().progress(function(instance,image){
    image.isLoaded?alert('loaded'):alert('broken');
});

I also tried the solutions from :

jQuery callback on image load (even when the image is cached)

https://groups.google.com/forum/#!topic/jquery-dev/7uarey2lDh8

but as it turns out, works in chrome, but not in FF or IE, is there any solution where I can check for an image which is present in memory but not in the "DOM" ? Thanks in advance.

after rigorous checking, I found out the reason that the img.onload wasn't being fired, turns out I was giving the urls wrong, apart from the said function, I was extracting background-urls from the DOM, and then giving it to this function to check whether they should be injected to the DOM or not, turns out that FF icnludes an extra set of "" (double quotes) in the bg-url which I was not removing, and hence they were causing error event to be triggered always. Seems that the most basic img.onload,img.onerror works as expected, thanks for all your help guys :) — somedev, Aug 19 '13 at 07:48

palerdot · Accepted Answer · 2013-08-19T06:31:27.437

1

You have to check for image onload after setting a source to it.

  var img = new Image();
  //set source to the image
  img.src = "set/image/source/path"

  img.onload = function(){

    //if image load is successful
    //create an jQuery object out of this image
    var jQimage = $(this);
    $('.myContainer').html(jQimage);

  }

Also note that jQuery load function cannot guarantee you a cross browser check for image loading as mentioned in jQuery docs

So, the best approach is to check onload with native javascript and create an jQuery object if necessary to make use of jQuery methods.

edited Aug 19 '13 at 06:31

answered Aug 19 '13 at 06:23

palerdot

6,150
3
36
42

Why? `img.onload` is fired after `img` has been loaded. If the image will be loaded from the cache, it might be ready before the `onload` function has been defined, then the event won't trigger at all. Setting `src` after `onload` handler makes sure this can't happen. – Teemu Aug 19 '13 at 06:26
If the image is already loaded, then you have reuse that image object as sometimes browsers ignore onload if try to load the same image (that is with same source). And, as for as your approach, if you don't add a source to an image object, then onload will not be called as there is nothing to load. – palerdot Aug 19 '13 at 06:29
I don't think order will make any difference, if that is what you ask. You are welcome to try. Whenever an image is set a source, it fetches the image object and listens to an onload handler (if any). The position of defining the onload handler can be before or after setting a source. It will anyway be called. – palerdot Aug 19 '13 at 06:38
I thought that what @Teemu said holds true, but I checked out and found that what you said is true too, on loading the image, it checks if it has any binded handler for the onload event and invokes it if present, but coming to topic, as there is no difference(I did try out your snippet too), firefox still doesn't call the onload event for image objects(which are not the DOM objects). – somedev Aug 19 '13 at 06:51
@somedev [check out this question. It might help](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached?lq=1) [Try the solution in this answer](http://stackoverflow.com/a/17281123/1410291) – palerdot Aug 19 '13 at 07:06
@palerdot, thanks but I already gave a link to the same Q&A in my question, I did try that solution, as I said, it works fine in chrome, but not in FF(in FF, it treats even an image which had a status of 404 as image which has loaded and adds it to the DOM) – somedev Aug 19 '13 at 07:22
and also on more thing, all these solutions seem to be for images which are already present in the DOM as most of them use $("img"), but in my case, i'm using just image objects which are not yet added to the DOM explicitly. – somedev Aug 19 '13 at 07:24
does img.onerror fires after you add a source to the image object ? – palerdot Aug 19 '13 at 07:26
hey, i just found out a sheepish mistake, am including it in my original question as a comment, please take time to read it :) – somedev Aug 19 '13 at 07:53

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

Have a look at what w3schools has to say about the Image() javascript object.

http://www.w3schools.com/jsref/dom_obj_image.asp

onabort - Loading of an image is interrupted, W3C YES

onerror - An error occurs when loading an image, W3C YES

onload - An image is finished loading, W3C YES

also the complete property of the Image() object, determines if the browser is finished loading an image, Unfortunately this particular property is not W3c

hope that helps a little

PS: After having a little Google search I found this Q/A from Stack overflow.

Cross-browser image onload event handling

edited May 23 '17 at 11:48

Community

1
1

answered Aug 19 '13 at 06:38

James Nicholson

917
8
19

those are helpful yes, I started out referring it, I believe that onabort is not the event that is called in my case as I'm not changing the src halfway through the image being downloaded, it's just that FF and IE do not seem to call the onload event for image objects when they are present in the browser cache. – somedev Aug 19 '13 at 06:58
Have a look at my edited answer i found previous Q/A from stack :) – James Nicholson Aug 19 '13 at 07:06
1

thank you James, but it didn't work either, most probably because .load() doesn't work for images which are already present in the browser cache, it says the same in jquery docs too - http://api.jquery.com/load-event/ it has its caveats mentioned in the link I provided :) – somedev Aug 19 '13 at 07:29
hey, i just found out a sheepish mistake, am including it in my original question as a comment, please take time to read it :) – somedev Aug 19 '13 at 07:45

detecting img loads in javascript

2 Answers2