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

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;
}

如果您使用的背景图像被缓存,它应该出现在图像之前.(注意透明图像,因为它们背后有背景.)