jQuery or Javascript check if image loaded
javascript, jquery
Solution
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.
Problem
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.