Chrome 75 里开始支持的一个新的图片标签上的试验特性 loading="lazy"

2019-06-14 11:44:47 +08:00
 Livid

chrome://flags 里找到 #enable-lazy-image-loading 然后 Enable。就可以用下面这样的代码实现快要滚动到显示区域时才加载图片。

<img loading="lazy" src="..." />

See also:

https://caniuse.com/#feat=loading-lazy-attr

3912 次点击
所在节点    前端开发
12 条回复
qq316107934
2019-06-14 11:47:04 +08:00
赞,以后懒加载不需要引用额外的 JS 了,就是这个特性上的太晚,兼容性堪忧,拓展到其他平台和浏览器估计要等上一年。
Terry05
2019-06-14 11:47:48 +08:00
可是。。。这个特性只有 Chrome 才支持的吗
Livid
2019-06-14 11:48:25 +08:00
@Terry05 最终会成为标准。可以提前在开发环境里测试和准备。
66beta
2019-06-14 11:54:16 +08:00
这才是龙头企业该做的事情
liaoyaoheng
2019-06-14 11:58:39 +08:00
警告:现在依旧是实验项目,某些网页的图片会加载不全。

jd.com 的商品详情的图片。
winterbells
2019-06-14 11:58:43 +08:00
@Terry05 凡是 Chrome 做出的决策,我们都坚决维护;凡是 Chrome 的指示,我们都始终不渝地遵循 [:doge]
agagega
2019-06-14 12:14:22 +08:00
Firefox:我们马上跟进
anyclue
2019-06-14 12:48:51 +08:00
不知道这个特性最终是怎样的,假设页面包含大量图片,正常匀速滚动,如果上面的图还没加载出来,直接滚到下面等下面的图,这个时候上面的图加载出来了会挤下面图的位置,这个时候,页面图片加载挤的你就不知道你刚才停留的位置在哪,要找的图在哪,页面自己在动

尤其是在图片加载不够快,你滚动的频繁的情况下
iRiven
2019-06-14 12:51:20 +08:00
必须赞
cest
2019-06-14 12:56:53 +08:00
@anyclue
img 没有 width height 的前端都该问斩
JerryBean
2019-06-14 13:02:47 +08:00
只希望 chrome 的 bfcache 尽快上
lxml
2019-06-14 22:49:09 +08:00
@Livid #3 livid 能加上 webassembly 的 tag 么,感觉这个话题可以开始讨论起来了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/573877

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX