带有语义标记的惰性图像加载 [英] Lazy image loading with semantic markup

问题描述

我有一个非常图片丰富的网站.为了节省用户带宽，我想在图像进入视口时进行延迟加载.有各种jQuery插件和类似的插件可以完成此任务.这是以放置实际图像url为代价的，而不是放置在 src 属性中，而是放置在其他地方.这会使标记不太美观，更糟糕的是，对于搜索引擎搜寻器而言，标记的清晰度也不高.

I have a very image-rich site. To conserve bandwidth for users, I would like to lazy-load images as they enter the view-port. There are assorted jQuery plugins and similar that accomplish this. This comes at the price of placing the actual image url, not in the src attribute but someplace else. This makes the markup less nice, and worse, less intelligible for search engine crawlers.

是否可以同时进行惰性图像加载和语义，对搜索引擎友好的标记?

Is there way to have both lazy image loading and semantic, search-engine-friendly markup?

推荐答案

请注意，现在< img loading ="lazy" 已标准化，因此您只需保留 src 作为实际来源，一切都可以与语义完美配合，有关更多详细信息，请访问:

Note that now <img loading="lazy" is standardized, so you can just keep src as the actual source and everything works perfectly with semantics, more details at: How do you make images load lazily only when they are in the viewport?

这篇关于带有语义标记的惰性图像加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！