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?

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?

• javascript
• jquery

Share Improve this question Follow asked Mar 6, 2012 at 10:53 dynamicdynamic 48.1k5656 gold badges161161 silver badges236236 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Yes, you should use image preloading

var newImage = new Image();
var loadingSrc = 'loading.gif';
$('img.myImage').attr('src', loadingSrc);
newImage.onload = function() {
    $('img.myImage').attr('src', newImage.src);
};
newImage.src = NEWVALUE;

$(function(){
   $('a.changeImage').click(function(e){
       e.preventDefault();
       //show the loading div
       $('img.myImage').attr('src',NEWVALUE);
       $("img").trigger("onload");
   });

$("img").bind("onload",function(){

 //remove the loading div
});
});

http://jsfiddle/PrXSW/9/

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>

Take a look to the jquery.blockui plugin. It may fit your needing.

the simplest solution would be to declare the loading img via CSS as background-image.

#loaded-image {
    /* shows loading icon until picture is fully loaded */
    background-image: url(loading.gif);
    background-repeat: no-repeat;
}