jquery - 加载图像时在图像内加载指示器

Question

我非常喜欢这里呈现的效果：

然而问题是，如果您查看源代码，您会注意到没有任何源代码 - 这一切都是通过 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 时仍然显示图像。

score 7 · Accepted Answer

你可以做

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

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

score 0 · Accepted Answer

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

2 回答 2