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.

Answer 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.

Answer 2

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