有趣的研究 来自 Aaron Peters 关于 <img loading="lazy" ... >
在我的 13 英寸 Macbook 上,停靠栏位于左侧,Chrome 的视窗高度为 786 像素,因此对于页面下方超过视窗高度 4 倍的
loading="lazy"
图片,Chrome 在页面加载时会急切地获取它们。我认为,这过于急切。为什么不使用 1000 像素这样的较低阈值呢?或者更好的是:根据实际视窗高度设置阈值。
我的猜测是,他们选择在默认情况下不过度设计该功能,并将随着时间的推移进行改进。通过选择一个相当高的阈值,他们降低了在使用 width
/height
属性的图片的页面上,布局发生变化而惹恼用户的风险。
我认为这个 未合并的 Pull Request 是我们最接近规范的东西,它使用了类似“滚动到视窗中”的语言,这意味着根本没有阈值。
我认为阈值取决于网络状况(?)
来自 https://webdev.ac.cn/native-lazy-loading/
我也读过那篇文章,从那以后我对此进行了很多测试,结果发现,在 Chrome Dev Tools 中模拟网络状况时,阈值差异可以忽略不计,但是使用真实设备在缓慢的 2G 连接下,阈值会发生很大的变化。
我认为(阅读:希望)Chris 说的是对的,它会随着时间的推移而改进,因为目前我并不确定在正在开发的电子商务模块中实现原生延迟加载是否真的可行,主要是因为阈值方面的不确定性。
在我的测试中,Chrome 过于急切地下载了远低于视窗的图片,但是不支持“loading=lazy”并使用 lazysizes 作为回退的浏览器表现完美。
希望有人能花更多时间对这方面进行更彻底的测试。
—而且 Firefox 和 Safari 太懒了.