javascript - 加载所有图像时全局触发 'loading gif'(内联显示)

Question

想知道在加载图像之前和加载图像时触发加载微调 gif 的最佳方法是什么。。我想要这个小的微调 gif 来触发 **图像加载位置的内联；什么是好的方法.. 我不希望每张图片在屏幕中间都有一个微调 gif，而是在图片加载的地方内联。

是否可以创建一个函数来实现应用程序中所有图像的这种情况？

(甚至更好，但只是一个很好的选择；我可以检测 .png 然后对所有 .png 执行此操作吗？答案就足够了。所有图像或 .pngs 仅)

符合这个逻辑的东西:

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

加载图像会在加载图像后立即消失。在 Css 中它甚至更好，您可以添加一个将显示的背景 loading.gif，加载图像将覆盖它。

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