1
wuxingsanren 2020-03-29 14:56:20 +08:00
学习了,👍楼主
|
2
Track13 2020-03-29 16:05:51 +08:00 via Android
和暗色模式一样,等 5 年再说。好多浏览器版本还是 60 几
|
3
autoxbc 2020-03-29 19:25:46 +08:00 18
其实懒加载会破坏用户体验
想象一下你打开一个页面放在旁边一分钟了,切换过去准备浏览发现图片开始一张一张加载,真的觉得设计懒加载的人是自作聪明 当然对我是无所谓的,我自己有脚本专门处理所有的 lazy 改成 eager,各种奇怪的私有属性就有四十多种 |
6
loading 2020-03-29 21:02:54 +08:00 via Android 1
lazyload 其实就是浪费大家的时间,省了流量费。
|
7
dvaknheo 2020-03-29 21:47:49 +08:00
看了一下我的谷歌浏览器:
版本 43.0.2357.81 m 不知道哪一年的版本 |
8
reeco 2020-03-29 21:48:53 +08:00
补充一点 Google Chrome 75 这个版本开始支持
|
9
DOLLOR 2020-03-29 22:12:04 +08:00
不光 img,iframe 标签也可以用 loading="lazy"
|
10
wework OP @DOLLOR 是的,caniuse.com 里面说到了相关属性
|
11
belin520 2020-03-29 23:00:03 +08:00 via iPhone
@autoxbc 懒加载是为了减缓服务器带宽压力的
不过现在大家都用 CDN,不在乎流量的话,肯定没必要懒加载 |
12
ericgui 2020-03-30 01:48:15 +08:00 5
谁说 lazy loading 没用的?
我们前端项目,一次性加载 6 万多条房地产数据信息,每个房子带 2-10 张图片 你要不是懒加载,这 app 直接崩溃 |
13
ericgui 2020-03-30 01:48:47 +08:00
懒加载,按需加载,这都是为了减轻客户端的压力
|
14
luckyrayyy 2020-03-30 02:12:36 +08:00
@ericgui 你不考虑下为什么要单个页面展示六万多的数据还不分页??
|
15
ericgui 2020-03-30 02:14:48 +08:00
|
16
randyo 2020-03-30 09:16:39 +08:00 via Android
@luckyrayyy 分页不也是一种懒加载吗😗
|
17
luckyrayyy 2020-03-30 09:26:39 +08:00 2
@randyo 这就有点强行对立然后抬杠了....要么一个一个加载,要么直接把数据库全搬来是吧
|
18
em2046 2020-03-30 09:28:27 +08:00
难道一直没有发现 V2EX 的头像一直在用这个吗
对用户体验来说,先会出现一个白块,然后图片显示。比起预先加载来说,一次闪烁会稍微干扰一下视觉焦点。 |
19
nekochyan 2020-03-30 10:19:25 +08:00 1
看本子的时候看到一半后面还没加载出来,就很蛋疼...
|
20
a62527776a 2020-03-30 10:37:56 +08:00
@ericgui 一次载入 6 万多条 这个需求合理吗?
|
21
ericgui 2020-03-30 10:48:27 +08:00
@a62527776a 老兄你是没做过地图相关的应用吧?那地图上有 6 万多个房子,我们也没办法啊
|
22
Archeb 2020-03-30 10:57:52 +08:00
@nekochyan +1,eh 的 multi page viewer 的懒加载实在是太傻逼了....
要是能学一下 nh 搞个 preload 该多好 |
24
ClericPy 2020-03-30 11:17:50 +08:00
暂时用 IntersectionObserver 做懒加载够使了, Chrome 那个以前试过, 好像我还得去开 flags...
|
25
ericgui 2020-03-30 13:47:55 +08:00
|
26
shmilyoo 2020-03-30 15:34:14 +08:00
@ericgui 贝壳等 app,地图找房,缩小地图后,一个区域就显示一个 数字标识, 放大后,会显示这个区域的所有小区的房子。 你们不会把每一间房子都单独显示标识了吧
|
27
Vegetable 2020-03-30 15:43:19 +08:00
为什么有人说懒加载会闪一下?浪费大家时间?
懒加载只是屏幕之外的先不加载吧,又不是所有图片都看心情加载,用户体验上明明没有什么差别。 只有图片加载非常慢的时候才会出现来不及加载不完的情况。这时候建议换一个好点的梯子,别怪网站设计这个功能多余 |
29
sfz97308 2020-03-30 16:07:26 +08:00
@ericgui 嗯,是这个意思。不过 zoom in 之后再去请求这个区域内的详细列表才对啊,不知道是不是你们有什么奇怪的需求。
回到原题,lazy loading 还是有用的,尤其是对于移动应用。但是对于桌面网页,很多时候还是希望把它扔到后台它可以慢慢帮我加载好。 |
30
wangxiaoaer 2020-03-30 16:10:20 +08:00
@ericgui #21 按照比例尺抽稀不行吗? 或者表达方式换成热力图、聚合等不也行吗?
|
32
Tomotoes 2020-03-30 19:15:14 +08:00 via Android
其实懒加载还有一个弊端楼上没有提,就是一般的 rss 阅读器,网页图片会换不过来。
|
33
jigi330 2020-03-31 00:21:28 +08:00
是的哦,从 `76`版本已经支持了哦。
https://web.dev/use-lazysizes-to-lazyload-images/ 另外,image lazy 加载并没有有些人说的那么蠢。 有点类似 android 的 recyclerview,用过的都知道,lazy 加载都有提前量的,一般是几个视窗单位之前的都已经提前加载好,大致看了可能是 500px 的阈值。 |
35
mostkia 2020-03-31 13:35:54 +08:00
等普及了才能真正用上吧,前端就兼容性这些破事,要说学习,大都也是学怎么造轮子。。
|
36
serenader 2020-03-31 16:46:32 +08:00
前面说懒加载没用的估计都不是前端开发者吧。在我看来,图片懒加载不仅仅只是用来减少带宽压力,更重要的是它能实实在在地提升页面的加载性能,能够让你的性能数据更好看。
我司好多项目都用了这个特性,性能优化效果挺明显的。当然懒加载并不是单纯地把所有图片都做懒加载这么简单,通常只是给不在视窗范围内的图片才做懒加载。 如果要再考虑用户体验的话,那么可以在页面 onload 之后,或者第一张图片加载完成之后再开始使用 Preload 或者 Prefetch 去进行预加载后面的懒加载图片,这样的好处是可以充分利用网络空闲的时候去提前下载好这些图片,不用等到用户滚动到图片位置才开始加载。而且使用 Preload 或者 Prefetch 的好处是,它不会影响你的性能指标。是不是很棒?这样一番操作下来,其实跟你页面直接加载所有图片的效果类似,只是浏览器转圈圈的时间缩短了很多,页面加载性能也提升上来了。 对于 RSS 阅读器,以及爬虫的话,其实在服务端做个适配就行了,对特定 UA 做特殊处理,直接吐完整的图片标签,而不用懒加载,问题不就解决了。 所以回过头来看,懒加载有用吗?当然有用。前面的 V 友提到的用户体验不好,那只是部分网站没有做进一步优化而已。优化做得好的话体验基本跟不使用懒加载一致的。但是懒加载收益是提升了性能。 对图片优化感兴趣的同学可以看看这个手册: https://images.guide 另外对于楼主提到的 loading="lazy" 这个特性来说,目前很少浏览器支持,我个人建议可以做个兼容,低版本浏览器使用 IntersectionObserver 来进行懒加载。 |