Question

How can I load an image asyncronously with jQuery, and how do I know when the image loading is complete?

Answer 1

JQuery Image Loading

In our basic version, we will have a single div containing a loading spinner and once our large image is loaded (in the background) we will remove the spinner and insert our image.

You know when the image has been successfully loaded, when the exectution reaches the function pointed to in the success option, e.g.:

$.ajax({
  url: 'image-map.php',
  data: 'img=' + i.src, // 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'
    $('#loader')
      .removeClass('loading')
      .append(img)
      .append(html);

    // now show the image
    $(img).fadeIn();
  }
});