How to display busy image when actual image is loading in client machine

Question

i am going to call my server side method by jquery and my server side method will just give a html like <img src='pop.gif' />

after getting the image url from server side function i will just push the html into my div but i want the when image will be loading at client side then i want to show a busy image. so i plan to write the code like below

first code call server side method

$.ajax({
  url: 'image-map.aspx',
  data: {}, // the image url links up in our fake database
  dataType: 'html',
  success: function (html) {
    // because we're inside of the success function, we must refer
    // to the image as 'img' (defined originally), rather than 'this'

   var img = $(html);
   $(img).load(function() {
      //alert('Image Loaded');
   });
   $('#myidv').append(img);

  }
});

so i just need to know my code is ok. does it work and how to show spinner image till the image download at client side?

Answer 1

First of all, you should put the img appending inside the onload function like this:

$(img).load(function() {
    $('#mydiv').append(img);
});

This way the image will only be inserted after it's done loading.

For the loading part, there are many approaches, but one way is to put a loading image in the destination element (#mydiv), and remove that image at the same time when appending the new image. Something like this:

$.ajax({
    beforeSend: function() {
        $('#mydiv').append($(<img src="loading.gif" class="loading" />);
    },
    success: function(html) {
        var img = $(html);
        $(img).load(function() {
            $('#mydiv .loading').remove();
            $('#mydiv').append(img);
        });
    }
});