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.
<img id="photo" onload='loaded(this.id)' src="a_really_big_file.jpg" alt="this is some alt text" title="this is some title text" />
Using the jquery data store you can define a 'loaded' state.
<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />Then elsewhere you can do:
if ($('#myimage').data('loaded')) { // loaded, so do stuff}
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()