加载所有图像时全局触发“加载gif”（嵌入式显示）

Question

Wondering what the best approach is to trigger a loading spinner gif before and while an image is loading. . I would like this small spinner gif to trigger **inline of where the image is loading ; what is a good approach for this.. I do not want a spinner gif in the middle of the screen for every image , but inline where the image is loading.

Anyway to create one function for this to occur with all images across an application?

(Even better, but only a nice to have; could I detect .png and then do it for all .pngs either answer would suffice. Either all images, or .pngs only)

Something along the lines of this logic:

// if (not loaded?) * some condition that can detect
// code to be executed if condition is true
// show loading image
$('#loader_img').show();

// all images via img tag somehow?
$('img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

Answer 1

$('img').load(function() {
  $('#loader_img').fadeOut();
});

//you can also check if there is an error whilst loading the image
$('img').error(function(){ 
  $('#loader_img').fadeIn();
});

The loading image will disappear as soon as the image is loaded. In Css it is even better, you can add a background loading.gif that will show and the loading image will just cover it up.

img {
  background: url('loading-image.gif') no-repeat;
}