简单的图像加载器答案

【问题标题】：Simple image Loader简单的图像加载器
【发布时间】：2013-11-30 13:58:25
【问题描述】：

我有一个带有 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();
});

但是...这似乎仅在大多数情况下有效。有几次我只剩下 Loading 图像而没有显示 Big img。我不确定在哪些情况下图像不显示（它们都存储在我的本地主机上并满足相同的条件）。

如果我在 Big img 未加载的页面上按 F5/刷新，它们将加载第二次。

有什么想法吗？

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

【问题讨论】：

你能在实时页面上提供一个链接吗？如果没有，请尝试在图像上使用内联 CSS 来了解您希望它们如何开始，然后将 img-loading 设置为 hide() + the-big-img 到 load() 内的 fadeIn()。另外，给他们两个相同的类并使用id="img-loading"等来获得特异性。然后你可以调用$('.both-images-to-load').load()，当它们都完成时它会加载
哦，加载图像和运行这样的操作不是很准确，因为浏览器可以缓存图像，然后 .load() 函数不会运行，因为浏览器从不请求它。这就是为什么您在刷新之前看不到其他图像（刷新刷新缓存以获取新图像）
是的，我认为缓存一定是问题所在。那么......解决方案是什么？ :(
好的，我在这里找到了一个相关的话题：stackoverflow.com/questions/5624733/…

标签： jquery

【解决方案1】：

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

在 Apache 中禁用 ETag：

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

Header unset ETag
FileETag None

Reference and further instructions

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

Lazy Image Loading

【讨论】：

是的，我得到了 Loading-img 部分。另一方面，我不知道通过每次加载同一图像的不同版本来消除缓存，只是为了获得“加载效果”，我感觉如何。