Hi, I am having a bit of trouble working out when an image has been loaded.

I have been told that the following function will work but it isn't doing anything.

$("#photos img:first").load(function (){
    alert("Image loaded!");
});

There are no error's in my code. Everything else in my script works great.

My HTML looks like this.

<div id="photos">
    <img src="../sample1.jpg" style="background-color:#000033" width="1" height="1" alt="Frog!"/>
    <img src="../sample2.jpg" style="background-color:#999999" width="1" height="1" alt="Zooey!"/>
</div>

Do I have the wrong JQuery function? It should also be noted that the visibility is set to hidden. However even when visible there is no alert.

Any ideas?