How can I determine if an image has loaded, using Javascript/jQuery?

Either add an event listener, or have the image announce itself with onload. Then figure out the dimensions from there.

According to spec, onload is only an event for the body and frameset elements; that said, I think this works in IE, but I don't know that it works in any other browsers or that it is something you can assume...I was just looking into this a couple of weeks ago... – Jason Bunting Nov 5 '08 at 6:06 I have tested it in IE6, IE7, FF3, Opera9, Safair (Windows Beta), and Chrome (Windows Beta). – Kip Nov 5 '08 at 14:48.

You want to do what Allain said, however be aware that sometimes the image loads before dom ready, which means your load handler won't fire. The best way is to do as Allain says, but set the src of the image with javascript after attaching the load hander. This way you can guarantee that it fires.In terms of accessibility, will your site still work for people without javascript?

You may want to give the img tag the correct src, attach you dom ready handler to run your js: clear the image src (give it a fixed with and height with css to prevent the page flickering), then set your img load handler, then reset the src to the correct file. This way you cover all bases :).

The site still works for people without Javascript, they just have to scroll to see all of the image. – Kip Nov 5 '08 at 14:49.

Try something like: $("#photo"). Load(function() { alert(" }).

1 Thanks. However, there is a possibility that the image has already been loaded before this happens, in which case the load event wouldn't be fired. – Kip Nov 5 '08 at 14:47 How about a script tag setting this event right after the image tag?

The reason to use ready is to make sure the entire document is loaded, which is unnecessary in this case, right? – Jason Goemaat Sep 28 '10 at 22:02.

Here you have an example of adding a callback after the image has finished loading.

The right answer, is to use event.special. Load It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can use a special load event that fires immediately if the image is ready.Event.special.

Load is currently available as a plugin. Per the docs on .load().

Using the html5 data attribute you can define a 'loaded state' on the DOM object itself. Then elsewhere you can do: if ($('#myimage'). Data('loaded')) { // loaded, so do stuff }.

But set the src of the image with javascript after attaching the load hander. This way you can guarantee that it fires. " Example of this?

... doShow = function(){ if($('#img_id'). Attr('complete')){ alert('Image is loaded!'); } else { window. SetTimeout('doShow()',100); } }; $('#img_id').

Attr('src','image. Jpg'); doShow(); ... Seems like works everywhere...

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.