谷歌浏览器竟然自带 lazy load API

[wework]

今天刚好有个 typecho 主题，图片太多一下子加载有点慢，想加个 lazy load 控制一下，无意中发现了 chrome 浏览器带有 Lazy load API

只要在需要加载的图片那里添加一个 loading="lazy" 属性就可以了

<img src="大图.png" loading="lazy" onload="alert('Loaded!');">

貌似这个 loading 属性只有少数浏览器支持，所以 lazy load 还是用插件吧

https://caniuse.com/#search=loading

[wuxingsanren]

学习了，👍楼主

[bgm004]

和暗色模式一样，等 5 年再说。好多浏览器版本还是 60 几

[autoxbc]

其实懒加载会破坏用户体验

想象一下你打开一个页面放在旁边一分钟了，切换过去准备浏览发现图片开始一张一张加载，真的觉得设计懒加载的人是自作聪明

当然对我是无所谓的，我自己有脚本专门处理所有的 lazy 改成 eager，各种奇怪的私有属性就有四十多种

[zxcslove]

@autoxbc 给你点个赞

[mgrddsj]

@autoxbc #3 懒加载其实是对站长有利而已，服务器压力没那么大。

[loading]

lazyload 其实就是浪费大家的时间，省了流量费。

[dvaknheo]

看了一下我的谷歌浏览器：

版本 43.0.2357.81 m

不知道哪一年的版本

[reeco]

补充一点 Google Chrome 75 这个版本开始支持

[AV1]

不光 img，iframe 标签也可以用 loading="lazy"

[wework]

@DOLLOR 是的，caniuse.com 里面说到了相关属性

[icanfork]

@autoxbc 懒加载是为了减缓服务器带宽压力的
不过现在大家都用 CDN，不在乎流量的话，肯定没必要懒加载

[ericgui]

谁说 lazy loading 没用的？

我们前端项目，一次性加载 6 万多条房地产数据信息，每个房子带 2-10 张图片

你要不是懒加载，这 app 直接崩溃

[ericgui]

懒加载，按需加载，这都是为了减轻客户端的压力

[luckyrayyy]

@ericgui 你不考虑下为什么要单个页面展示六万多的数据还不分页？？

[ericgui]

@luckyrayyy 展示在地图上，分什么页

其他的形式，早就分页了

[randyo]

@luckyrayyy 分页不也是一种懒加载吗😗

[luckyrayyy]

@randyo 这就有点强行对立然后抬杠了....要么一个一个加载，要么直接把数据库全搬来是吧

[em2046]

难道一直没有发现 V2EX 的头像一直在用这个吗
对用户体验来说，先会出现一个白块，然后图片显示。比起预先加载来说，一次闪烁会稍微干扰一下视觉焦点。

[nekochyan]

看本子的时候看到一半后面还没加载出来，就很蛋疼...

[a62527776a]

@ericgui 一次载入 6 万多条 这个需求合理吗？

[ericgui]

@a62527776a 老兄你是没做过地图相关的应用吧？那地图上有 6 万多个房子，我们也没办法啊

[Archeb]

@nekochyan +1，eh 的 multi page viewer 的懒加载实在是太傻逼了....
要是能学一下 nh 搞个 preload 该多好

[sfz97308]

@ericgui 地图上在一屏内同时显示 6 万个？为什么不做 declutter 呢？

[ClericPy]

暂时用 IntersectionObserver 做懒加载够使了, Chrome 那个以前试过, 好像我还得去开 flags...

[ericgui]

@sfz97308 你说的 declutter 是不是就是 cluster ？ 总之有几个大圈，显示一定范围内，比如 10 公里内，有多少个房子。

但如果你 zoom in，就会显示所有的房子了啊

[shmilyoo]

@ericgui 贝壳等 app，地图找房，缩小地图后，一个区域就显示一个 数字标识， 放大后，会显示这个区域的所有小区的房子。 你们不会把每一间房子都单独显示标识了吧

[Vegetable]

为什么有人说懒加载会闪一下？浪费大家时间？
懒加载只是屏幕之外的先不加载吧，又不是所有图片都看心情加载，用户体验上明明没有什么差别。
只有图片加载非常慢的时候才会出现来不及加载不完的情况。这时候建议换一个好点的梯子，别怪网站设计这个功能多余

[ericgui]

@shmilyoo 是，我们会一个房子一个点，全部显示。这是需求，没办法

[sfz97308]

@ericgui 嗯，是这个意思。不过 zoom in 之后再去请求这个区域内的详细列表才对啊，不知道是不是你们有什么奇怪的需求。
回到原题，lazy loading 还是有用的，尤其是对于移动应用。但是对于桌面网页，很多时候还是希望把它扔到后台它可以慢慢帮我加载好。

[wangxiaoaer]

@ericgui #21 按照比例尺抽稀不行吗？ 或者表达方式换成热力图、聚合等不也行吗？

[stillyu]

@ericgui 可以给个链接看一下吗？ 6 万个点不会卡

[J0G57faC6uPo75W0]

其实懒加载还有一个弊端楼上没有提，就是一般的 rss 阅读器，网页图片会换不过来。

[jigi330]

是的哦，从 `76`版本已经支持了哦。
https://web.dev/use-lazysizes-to-lazyload-images/
另外，image lazy 加载并没有有些人说的那么蠢。
有点类似 android 的 recyclerview，用过的都知道，lazy 加载都有提前量的，一般是几个视窗单位之前的都已经提前加载好，大致看了可能是 500px 的阈值。

[ericgui]

@stillyu toB 的业务

[mostkia]

等普及了才能真正用上吧，前端就兼容性这些破事，要说学习，大都也是学怎么造轮子。。

[serenader]

前面说懒加载没用的估计都不是前端开发者吧。在我看来，图片懒加载不仅仅只是用来减少带宽压力，更重要的是它能实实在在地提升页面的加载性能，能够让你的性能数据更好看。

我司好多项目都用了这个特性，性能优化效果挺明显的。当然懒加载并不是单纯地把所有图片都做懒加载这么简单，通常只是给不在视窗范围内的图片才做懒加载。

如果要再考虑用户体验的话，那么可以在页面 onload 之后，或者第一张图片加载完成之后再开始使用 Preload 或者 Prefetch 去进行预加载后面的懒加载图片，这样的好处是可以充分利用网络空闲的时候去提前下载好这些图片，不用等到用户滚动到图片位置才开始加载。而且使用 Preload 或者 Prefetch 的好处是，它不会影响你的性能指标。是不是很棒？这样一番操作下来，其实跟你页面直接加载所有图片的效果类似，只是浏览器转圈圈的时间缩短了很多，页面加载性能也提升上来了。

对于 RSS 阅读器，以及爬虫的话，其实在服务端做个适配就行了，对特定 UA 做特殊处理，直接吐完整的图片标签，而不用懒加载，问题不就解决了。

所以回过头来看，懒加载有用吗？当然有用。前面的 V 友提到的用户体验不好，那只是部分网站没有做进一步优化而已。优化做得好的话体验基本跟不使用懒加载一致的。但是懒加载收益是提升了性能。

对图片优化感兴趣的同学可以看看这个手册： https://images.guide

另外对于楼主提到的 loading="lazy" 这个特性来说，目前很少浏览器支持，我个人建议可以做个兼容，低版本浏览器使用 IntersectionObserver 来进行懒加载。