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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

今天刚好有个 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

lazy

load

API

36 条回复 • 2020-03-31 16:46:32 +08:00

wuxingsanren

2020-03-29 14:56:20 +08:00

学习了，👍楼主

Track13

2020-03-29 16:05:51 +08:00 via Android

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

autoxbc

2020-03-29 19:25:46 +08:00

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

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

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

zxcslove

2020-03-29 19:32:48 +08:00

@autoxbc 给你点个赞

mgrddsj

2020-03-29 19:36:13 +08:00 via Android

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

loading

2020-03-29 21:02:54 +08:00 via Android

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

dvaknheo

2020-03-29 21:47:49 +08:00

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

版本 43.0.2357.81 m

不知道哪一年的版本

reeco

2020-03-29 21:48:53 +08:00

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

DOLLOR

2020-03-29 22:12:04 +08:00

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

wework

2020-03-29 22:23:51 +08:00

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

belin520

2020-03-29 23:00:03 +08:00 via iPhone

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

ericgui

2020-03-30 01:48:15 +08:00

谁说 lazy loading 没用的？

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

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

ericgui

2020-03-30 01:48:47 +08:00

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

luckyrayyy

2020-03-30 02:12:36 +08:00

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

ericgui

2020-03-30 02:14:48 +08:00

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

其他的形式，早就分页了

randyo

2020-03-30 09:16:39 +08:00 via Android

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

luckyrayyy

2020-03-30 09:26:39 +08:00

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

em2046

2020-03-30 09:28:27 +08:00

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

nekochyan

2020-03-30 10:19:25 +08:00

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

a62527776a

2020-03-30 10:37:56 +08:00

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

ericgui

2020-03-30 10:48:27 +08:00

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

Archeb

2020-03-30 10:57:52 +08:00

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

sfz97308

2020-03-30 11:16:09 +08:00

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

ClericPy

2020-03-30 11:17:50 +08:00

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

ericgui

2020-03-30 13:47:55 +08:00

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

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

shmilyoo

2020-03-30 15:34:14 +08:00

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

Vegetable

2020-03-30 15:43:19 +08:00

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

ericgui

2020-03-30 15:44:27 +08:00 via Android

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

sfz97308

2020-03-30 16:07:26 +08:00

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

wangxiaoaer

2020-03-30 16:10:20 +08:00

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

stillyu

2020-03-30 18:46:26 +08:00

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

Tomotoes

2020-03-30 19:15:14 +08:00 via Android

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

jigi330

2020-03-31 00:21:28 +08:00

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

ericgui

2020-03-31 02:15:23 +08:00 via Android

@stillyu toB 的业务

mostkia

2020-03-31 13:35:54 +08:00

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

serenader

2020-03-31 16:46:32 +08:00

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

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

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

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

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

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

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