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

发布于 2024-11-25 09:06:52 字数 695 浏览 3 评论 0原文

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

http://rascals.eu/templates/ rt0802/portfolios/portfolio-2-columns/

然而问题是，如果你查看源代码，你会发现没有任何东西 - 这都是通过 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 时图像仍然显示。

原文

I quite like the effect presented here:

http://rascals.eu/templates/rt0802/portfolios/portfolio-2-columns/

The problem however is that if you look at the source code you'll notice that there aren't any - it's all done via jquery and links created like this:

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

with an image probably created in the background and then inserted in that location at load.

However, is this possible in a different way, more standards compliant way? Can anyone guide me towards any resources/tutorials if so?

Thanks.

Edit: By standards compliant I mean:

With the img src pointing to the correct location so that images still display when js is disabled.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

檐上三寸雪 2024-12-02 09:06:52

如果您使用的背景图像被缓存，您可以这样做，

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

它应该出现在图像之前。（注意透明图像，因为它们后面有背景。）

You could do

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

If the background image you use is cached it should appear before the images do. (Watch out for transparent images, since they will have the background behind them.)

回复收藏 0 原文