Javascript 图像缓存和使用css3加载微调器-需要建议

我有一个很好的网站，我现在有缩略图，我需要把到位

我想做的第一件事是在图像加载时有一个加载微调器，然后一旦图像加载，微调器就不再显示。我见过一些人将gif作为背景放置在图像上，然后将图像加载到顶部。但是我想使用CSS微调器。以下是CSS微调器的一些示例：

然后，我希望浏览器在加载图像后缓存这些图像

我知道javascript用于此目的。微调器是否会使用javascript来进行调整？有没有网站能很好地概述这个过程？如果这里有人能帮忙，我将不胜感激。这个任务，我肯定不是很难，但我真的不确定从哪里开始

我会给出一个JSFIDLE示例或其他东西，但现在我只想知道在进行此操作时要寻找什么

编辑：进一步阅读后，我说浏览器会自动缓存图像，对吗？我有点困惑，如果是这样的话，预装图片对我来说是否值得

---

提前感谢。

加载图像时，您可以通过这种方式关闭微调器（假设使用jQuery）

。。。
$（'.spinner img'）。在（'load'，function（）上{
$（this.parent（）.removeClass（'spinner'））
})

谢谢。使用

$（'.spinner img'）

，“img”包含在spinner类中，我接受吗？因此，当“img”标记加载时，类微调器将被删除。类微调器是css3预加载程序。对吗？对。您将需要构建自己的.spinner CSS。好的，很好。假设我有三张照片在一起。。。我将有三个容器，每个容器包含这个微调器div和img。你认为在每个容器中间有旋转器的最佳方法是什么？我不确定在加载图像之前，微调器是否会靠得很近，从而导致包含的div扩展。是的，每个都有一个。容器应具有最小宽度和最小高度，以便在加载元素时为微调器留出空间，并为图像扩展元素留出空间。

<div class="spinner">...</div>


$('.spinner img').on('load', function() {
    $(this).parent().removeClass('spinner')
})