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

全局触发'加载gif'而所有图像都加载（显示内联）

1 个答案: