简单的图像装载机

Question

我有一个简单的“加载”场景，包含2张图片：

$('.img-loading').show();
// main image loaded ?
$('.the-big-img').hide().load(function () {
    // hide/remove the loading image
    $('.img-loading').hide();
    $('.the-big-img').fadeIn();
});

然而......这似乎只有只有次。有几次我没有显示Big img的装载图像。我不确定图像在哪些情况下不显示（它们都存储在我的localhost上并符合相同的标准）。

如果我在没有加载Big img的页面上点击F5 / refresh，它们将第二次加载。

有什么想法吗？

更新 找到有关缓存的一些信息：jQuery .load() not firing on images (probably caching?)

Answer 1

我会给你一些其他的解决方案，以防万一你发现的不起作用。

---

在Apache中禁用ETag：

这告诉浏览器每次都加载一个新版本的文件，消除了缓存问题。

Header unset ETag
FileETag None

• Reference and further instructions

放置图像持有者动画代替待处理图像，直到加载：

• Lazy Image Loading