【发布时间】:2013-04-16 05:12:40
【问题描述】:
我有一个图片丰富的网站。为了为用户节省带宽,我想在图像进入视口时延迟加载图像。有assorted jQuery plugins 和类似的东西可以做到这一点。这是以放置实际图像 url 为代价的,而不是在 src 属性中,而是在其他地方。这使得标记不太好,更糟糕的是,搜索引擎爬虫难以理解。
有没有办法同时拥有延迟图像加载和语义、搜索引擎友好的标记?
【问题讨论】:
我有一个图片丰富的网站。为了为用户节省带宽,我想在图像进入视口时延迟加载图像。有assorted jQuery plugins 和类似的东西可以做到这一点。这是以放置实际图像 url 为代价的,而不是在 src 属性中,而是在其他地方。这使得标记不太好,更糟糕的是,搜索引擎爬虫难以理解。
有没有办法同时拥有延迟图像加载和语义、搜索引擎友好的标记?
【问题讨论】:
您无需将图像的src 放在其他位置。有一个没有。可用的插件。检查以下链接http://www.appelsiini.net/projects/lazyload
【讨论】:
src 中使用占位符,在data-original 属性中使用实际网址。
请注意,现在 <img loading="lazy" 已标准化,因此您可以将 src 保留为实际来源,一切都与语义完美结合,更多详细信息请访问:How do you make images load lazily only when they are in the viewport?
【讨论】: