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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1991 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

12 条回复 • 2019-06-14 22:49:09 +08:00

qq316107934

2019-06-14 11:47:04 +08:00

赞，以后懒加载不需要引用额外的 JS 了，就是这个特性上的太晚，兼容性堪忧，拓展到其他平台和浏览器估计要等上一年。

Terry05

2019-06-14 11:47:48 +08:00

可是。。。这个特性只有 Chrome 才支持的吗

Livid

MOD

2019-06-14 11:48:25 +08:00

@Terry05 最终会成为标准。可以提前在开发环境里测试和准备。

66beta

2019-06-14 11:54:16 +08:00 via Android

这才是龙头企业该做的事情

liaoyaoheng

2019-06-14 11:58:39 +08:00

警告：现在依旧是实验项目，某些网页的图片会加载不全。

如 jd.com 的商品详情的图片。

winterbells

2019-06-14 11:58:43 +08:00 via Android

@Terry05 凡是 Chrome 做出的决策，我们都坚决维护；凡是 Chrome 的指示，我们都始终不渝地遵循 [:doge]

agagega

2019-06-14 12:14:22 +08:00 via iPhone

Firefox：我们马上跟进

anyclue

2019-06-14 12:48:51 +08:00

不知道这个特性最终是怎样的，假设页面包含大量图片，正常匀速滚动，如果上面的图还没加载出来，直接滚到下面等下面的图，这个时候上面的图加载出来了会挤下面图的位置，这个时候，页面图片加载挤的你就不知道你刚才停留的位置在哪，要找的图在哪，页面自己在动

尤其是在图片加载不够快，你滚动的频繁的情况下

iRiven

2019-06-14 12:51:20 +08:00 via Android

必须赞

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 么，感觉这个话题可以开始讨论起来了。