Question

I have

<img src="..." class="myImage">
<a href="..." class="changeImage">

$(function(){
   $('a.changeImage').click(function(){
       $('img.myImage').attr('src',NEWVALUE);
   });
});

When I click the link, i inject a new src to .myImage. Is it possibile to show a loading image while the new src is loading?

Answer 1

You can use the load event (untested code)

<img src="smallLoader.png" alt="loading" id="loading" />
<img alt="bigImage" id="bigImage" style="display:none" />

<script type="text/javascript">
$(document).ready(function() {

    $('#bigImage').load(function() {
        $('#loading').hide();
        $('#bigImage').show();
    });

    $('#bigImage').attr("src", "bigimage.png");
});
</script>