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时仍然显示图像。

Answer 1

你可以做到

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

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

Answer 2

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