How to load an image asyncronously with jQuery and how to know that the image loading is complete?

Question

Well, the question is in the title.

Answer 1

How to check that image is loaded. It is using the jquery ajax load() function.

Answer 2

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();
  }
});

Answer 3

jQuery had a load method that can be used to notify you when an image has downloaded. So in your case you would use jquery to make an ajax request that would return a src to the image and then create a new image object and apply the load method like below.

var $img = $('<img>');
$img.attr('src', 'image.jpg').load(function() {
   alert('Image Loaded');
   //use jquery here to insert your image into the DOM
});

I hope that's clear. I assumed you knew how to make an ajax request if you were asking about image loading.

Thanks Nick