Check if an image is loaded (no errors) in JavaScript?

Another option is to trigger the onload and/or onerror events by setting the image's src to empty string then back to the original src Here's an example of what I mean.

Another option is to trigger the onload and/or onerror events by setting the image's src to empty string then back to the original src. Here's an example of what I mean: $(img). Load(function() { console.

Log("image loaded correctly"); } . Error(function() { console. Log("error loading image"); } var imgSrc = img.

Src; img. Src = ""; img. Src = imgSrc; // Triggers onload and onerror events.

Hope this helps!

Hmm that seems to work, and after a few tests it doesn't seem to hurt the loading of the image either. Thanks! – William Dec 30 '09 at 2:10 1 Doesn't seem to be working as well as I hoped.In Google Chrome it seems to be having issues when the image is already in cache.

It doesn't trigger the load() method. :( – William Dec 30 '09 at 3:05 Ugg, you're right. Chrome is definitely the most annoying browser to develop for.

On the bright, I think I may have found a work around: set the image source to "" then back to the original source. I'll update my answer. – Xavi Dec 30 '09 at 3:25 Looks like we were both thinking the same thing.

It seems to work so far. I'll write back if I find another bug but so far it's working good. :) – William Dec 30 '09 at 3:28 Doesn't play well with IE6.

It likes to cause an error event when changing the src. Also, in IE6 when you change the src it creates a new HTTP request. :( – William Dec 30 '097 at 21:23.

Check the complete and naturalWidth properties, in that order. sajithmr.me/javascript-check-an-image-is... function IsImageOk(img) { // During the onload event, IE correctly identifies any images that // weren’t downloaded as not complete. Others should too.

Gecko-based // browsers act like NS4 in that they report this incorrectly. If (!img. Complete) { return false; } // However, they do have two very useful properties: naturalWidth and // naturalHeight.

These give the true size of the image. If it failed // to load, either of these should be zero. If (typeof img.

NaturalWidth! = "undefined" && img. NaturalWidth == 0) { return false; } // No other way of checking: assume it’s ok.

Return true; }.

Interesting, I was looking at that post earlier and I didn't realize that they were doing! Complete for IE as naturalWidth is not defined in IE. Going to check it now.

– William Dec 30 '09 at 1:07 I think I should have explained better in my main question. I'm calling this after I add the events for load,error so that if it already had an error I will know. This method returns false even if a method is still "loading" and it has 0 errors.

I need something to check if it has had an error, if it's still loading / complete then it should return true. Thanks for the answer though – William Dec 30 '09 at 1:30 You should edit your question. – SLaks Dec 30 '09 at 1:42 Updated, let me know if you want anymore details.

Thanks for the help – William Dec 30 '09 at 1:51 1 You can just check img. NaturalWidth === 0, no need to test that the type is not undefined. – nornagon Dec 30 '097 at 8:38.

As I understand the . Complete property is non-standard. It may not be universal... I notice it seem to work differently in Firefox verses IE.

I am loading a number of images in javascript then checking if complete. In Firefox, this seems to work great. In IE, it doesn't because the images appear to be loading on another thread.It works only if I put a delay between my assignment to image.

Src and when I check the image. Complete property. Using image.

Onload and image. Onerror isn't working for me, either, because I need to pass a parameter to know which image I am talking about when the function is called. Any way of doing that seems to fail because it actually seems to pass the same function, not different instances of the same function.

So the value I pass into it to identify the image always ends up being the last value in the loop. I cannot think of any way around this problem. On Safari and Chrome, I am seeing the image.

Complete true and the naturalWidth set even when the error console shows a 404 for that image... and I intentionally removed that image to test this. But the above works well for Firefox and IE.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.