如何在显示图像之前显示装载程序？

Question

我有一个画廊，缩略图的结构是这样的：

<div style="background-image: _URL_FOR_THE_IMAGE;">
  <div class="ajax_loader"></div>
</div>

和JS：

$(window).load(function() {
  $(".ajax_loader").fadeOut("slow");
})

但问题是装载机永远不会消失。

如何让它发挥作用？

谢谢

Answer 1

您可以像这样使用Image类：

var img = new Image();
img.onload = function() {
    // code to remove loader and display image
}
img.src = IMAGE_URL;

这样，您可以在加载图像时获得一个事件，并将其保存在浏览器的缓存中。