Determining if a changed image is loaded
<p>I am creating a little gallery using jQuery and stuck on a small point</p>

<p>it's something like this:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
$('#thumb1').click(function(){
          $('#fullimage').attr('src','loading.gif').fadeOut(800,function(){
            $(this).attr('src','newimage.jpg').bind('onreadystatechange load', function(){
            $(this).fadeIn(300);       
            });

          });          
       });
//same code for $('#thumb2') etc.
});
&lt;/script&gt;
&lt;img src="defaultimage.jpg" id="fullimage" /&gt;&lt;br /&gt;
&lt;a&gt;&lt;img id="thumb1" src="notimportantthumb.jpg"&gt;&lt;/a&gt;
&lt;a&gt;&lt;img id="thumb2" src="notimportantthumb2.jpg"&gt;&lt;/a&gt;
</code></pre>

<p>The thing is that, if the loading of the image takes more than 800ms, it won't work.</p>

<p>I know I have to use jQuery's load() or similar function, but I could not put it together. How can I identify if a changed image with jQuery is loaded or not ? 
Thanks</p>

<p>Edit: Solved with adding a second hidden image as a loader. If anyone's interested:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
    $('#thumb1').click(function(){
        if ($('#fullimage').attr('src')!='newimage.jpg') { //it would not load, just show the loading.gif

            $('#fullimage').hide(); $('#hiddenloader').show();
              $('#fullimage').attr('src','newimage.jpg').load(function(){
                $('#hiddenloader').fadeOut(300,function(){
                    $('#fullimage').fadeIn(300);
                });

                });

          }
    });
//same code for $('#thumb2') etc.
});
&lt;/script&gt;
&lt;img src="defaultimage.jpg" id="fullimage" /&gt;&lt;br /&gt;
&lt;img src="loading.gif" id="hiddenloader" style="display: none;" /&gt;
&lt;a&gt;&lt;img id="thumb1" src="notimportantthumb.jpg" /&gt;&lt;/a&gt;
&lt;a&gt;&lt;img id="thumb2" src="notimportantthumb2.jpg" /&gt;&lt;/a&gt;
</code></pre>
