jQuery or Javascript check if image loaded

Question

I know there is a lot of these on Stackoverflow but I haven't found one that works for me in a recent version of jquery (1.10.2).

I did try:

$(".lazy").load(function (){}

But I believe after some research using .load to detect image load is deprecated in jQuery 1.8. What I need to do is fire an image resize function once the images are loaded. I don't have control over the HTML and at the moment I am having to add the image dimensions via jQuery by attaching an attribute (via .attr()) once page loads so that I can use lazyload js.

The problem is that I need an accurate way to hold off all my various scripts until the image has loaded properly else the functions sometimes fire before every image had loaded. I have tried using $(window).load(function (){}); however it sometimes still fires before every image had loaded.

Answer 1

I usually do this:

var image = new Image(); image.onload = function () {    console.info("Image loaded !");    //do something... } image.onerror = function () {    console.error("Cannot load image");    //do something else... } image.src = "/images/blah/foo.jpg"; 

Remember that the loading is asynchronous so you have to continue the script inside the onload and onerror events.

Answer 2

There's also a useful .complete property of an image object, you can use it if you have already set the .src of your <img> before attaching to it any event listeners:

var img=document.getElementById('myimg'); var func=function(){     // do your code here     // `this` refers to the img object }; if(img.complete){      func.call(img); } else{      img.onload=func;  } 

Reference: http://www.w3schools.com/jsref/prop_img_complete.asp