加载图像时在图像内加载指示器答案

【问题标题】：Loading indicator inside image whilst image is loading加载图像时在图像内加载指示器
【发布时间】：2011-07-20 12:03:32
【问题描述】：

我很喜欢这里呈现的效果：

但问题是，如果您查看源代码，您会发现没有任何源代码 - 这一切都是通过 jquery 完成的，并且链接创建如下：

<a href="xxx.jpg" rel="lightbox[portfolio]" style="width: 446px; height: 205px" class="autoload hover" data-image_url="yyy.jpg"></a>

可能在背景中创建图像，然后在加载时插入该位置。

但是，这是否可能以不同的方式、更符合标准的方式实现？如果是这样，任何人都可以指导我获取任何资源/教程吗？

谢谢。

编辑：按标准兼容我的意思是：

img src 指向正确的位置，以便在禁用 js 时仍然显示图像。

【问题讨论】：

【解决方案1】：

你可以的

img {
  display: block;
  background-image: url(...);
  background-position: center center;
}

如果您使用的背景图片被缓存，它应该出现在图片之前。（注意透明图片，因为它们后面会有背景。）

【讨论】：

我很想编辑您的答案以使用 background 速记：D
@thirtydot 哈！如果你这样做了，你最好按照正确的顺序来做:) 好的，如果你必须这样做，我允许你添加第二个带有速记版本的代码块，（包括黑色背景颜色）。 :)

【解决方案2】：

在大多数情况下，爱丽儿的方式会有所帮助。但是，在网站第一次加载时，您将无法看到加载图像，因为某些浏览器在开始加载图像（img 标签）后正在加载背景。下次，图像将被缓存，页面看起来会很好。正如已经提到的，这种方式适用于不透明的图像。我通常自己使用这种背景技术来加载图像:)

【讨论】：