V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wework
V2EX  ›  程序员

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

  •  
  •   wework · 2020-03-29 14:50:31 +08:00 · 7377 次点击
    这是一个创建于 1679 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天刚好有个 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
    36 条回复    2020-03-31 16:46:32 +08:00
    wuxingsanren
        1
    wuxingsanren  
       2020-03-29 14:56:20 +08:00
    学习了,👍楼主
    Track13
        2
    Track13  
       2020-03-29 16:05:51 +08:00 via Android
    和暗色模式一样,等 5 年再说。好多浏览器版本还是 60 几
    autoxbc
        3
    autoxbc  
       2020-03-29 19:25:46 +08:00   ❤️ 18
    其实懒加载会破坏用户体验

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

    当然对我是无所谓的,我自己有脚本专门处理所有的 lazy 改成 eager,各种奇怪的私有属性就有四十多种
    zxcslove
        4
    zxcslove  
       2020-03-29 19:32:48 +08:00   ❤️ 1
    @autoxbc 给你点个赞
    mgrddsj
        5
    mgrddsj  
       2020-03-29 19:36:13 +08:00 via Android
    @autoxbc #3 懒加载其实是对站长有利而已,服务器压力没那么大。
    loading
        6
    loading  
       2020-03-29 21:02:54 +08:00 via Android   ❤️ 1
    lazyload 其实就是浪费大家的时间,省了流量费。
    dvaknheo
        7
    dvaknheo  
       2020-03-29 21:47:49 +08:00
    看了一下我的谷歌浏览器:

    版本 43.0.2357.81 m

    不知道哪一年的版本
    reeco
        8
    reeco  
       2020-03-29 21:48:53 +08:00
    补充一点 Google Chrome 75 这个版本开始支持
    DOLLOR
        9
    DOLLOR  
       2020-03-29 22:12:04 +08:00
    不光 img,iframe 标签也可以用 loading="lazy"
    wework
        10
    wework  
    OP
       2020-03-29 22:23:51 +08:00
    @DOLLOR 是的,caniuse.com 里面说到了相关属性
    belin520
        11
    belin520  
       2020-03-29 23:00:03 +08:00 via iPhone
    @autoxbc 懒加载是为了减缓服务器带宽压力的
    不过现在大家都用 CDN,不在乎流量的话,肯定没必要懒加载
    ericgui
        12
    ericgui  
       2020-03-30 01:48:15 +08:00   ❤️ 5
    谁说 lazy loading 没用的?

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

    你要不是懒加载,这 app 直接崩溃
    ericgui
        13
    ericgui  
       2020-03-30 01:48:47 +08:00
    懒加载,按需加载,这都是为了减轻客户端的压力
    luckyrayyy
        14
    luckyrayyy  
       2020-03-30 02:12:36 +08:00
    @ericgui 你不考虑下为什么要单个页面展示六万多的数据还不分页??
    ericgui
        15
    ericgui  
       2020-03-30 02:14:48 +08:00
    @luckyrayyy 展示在地图上,分什么页

    其他的形式,早就分页了
    randyo
        16
    randyo  
       2020-03-30 09:16:39 +08:00 via Android
    @luckyrayyy 分页不也是一种懒加载吗😗
    luckyrayyy
        17
    luckyrayyy  
       2020-03-30 09:26:39 +08:00   ❤️ 2
    @randyo 这就有点强行对立然后抬杠了....要么一个一个加载,要么直接把数据库全搬来是吧
    em2046
        18
    em2046  
       2020-03-30 09:28:27 +08:00
    难道一直没有发现 V2EX 的头像一直在用这个吗
    对用户体验来说,先会出现一个白块,然后图片显示。比起预先加载来说,一次闪烁会稍微干扰一下视觉焦点。
    nekochyan
        19
    nekochyan  
       2020-03-30 10:19:25 +08:00   ❤️ 1
    看本子的时候看到一半后面还没加载出来,就很蛋疼...
    a62527776a
        20
    a62527776a  
       2020-03-30 10:37:56 +08:00
    @ericgui 一次载入 6 万多条 这个需求合理吗?
    ericgui
        21
    ericgui  
       2020-03-30 10:48:27 +08:00
    @a62527776a 老兄你是没做过地图相关的应用吧?那地图上有 6 万多个房子,我们也没办法啊
    Archeb
        22
    Archeb  
       2020-03-30 10:57:52 +08:00
    @nekochyan +1,eh 的 multi page viewer 的懒加载实在是太傻逼了....
    要是能学一下 nh 搞个 preload 该多好
    sfz97308
        23
    sfz97308  
       2020-03-30 11:16:09 +08:00
    @ericgui 地图上在一屏内同时显示 6 万个?为什么不做 declutter 呢?
    ClericPy
        24
    ClericPy  
       2020-03-30 11:17:50 +08:00
    暂时用 IntersectionObserver 做懒加载够使了, Chrome 那个以前试过, 好像我还得去开 flags...
    ericgui
        25
    ericgui  
       2020-03-30 13:47:55 +08:00
    @sfz97308 你说的 declutter 是不是就是 cluster ? 总之有几个大圈,显示一定范围内,比如 10 公里内,有多少个房子。

    但如果你 zoom in,就会显示所有的房子了啊
    shmilyoo
        26
    shmilyoo  
       2020-03-30 15:34:14 +08:00
    @ericgui 贝壳等 app,地图找房,缩小地图后,一个区域就显示一个 数字标识, 放大后,会显示这个区域的所有小区的房子。 你们不会把每一间房子都单独显示标识了吧
    Vegetable
        27
    Vegetable  
       2020-03-30 15:43:19 +08:00
    为什么有人说懒加载会闪一下?浪费大家时间?
    懒加载只是屏幕之外的先不加载吧,又不是所有图片都看心情加载,用户体验上明明没有什么差别。
    只有图片加载非常慢的时候才会出现来不及加载不完的情况。这时候建议换一个好点的梯子,别怪网站设计这个功能多余
    ericgui
        28
    ericgui  
       2020-03-30 15:44:27 +08:00 via Android
    @shmilyoo 是,我们会一个房子一个点,全部显示。这是需求,没办法
    sfz97308
        29
    sfz97308  
       2020-03-30 16:07:26 +08:00
    @ericgui 嗯,是这个意思。不过 zoom in 之后再去请求这个区域内的详细列表才对啊,不知道是不是你们有什么奇怪的需求。
    回到原题,lazy loading 还是有用的,尤其是对于移动应用。但是对于桌面网页,很多时候还是希望把它扔到后台它可以慢慢帮我加载好。
    wangxiaoaer
        30
    wangxiaoaer  
       2020-03-30 16:10:20 +08:00
    @ericgui #21 按照比例尺抽稀不行吗? 或者表达方式换成热力图、聚合等不也行吗?
    stillyu
        31
    stillyu  
       2020-03-30 18:46:26 +08:00
    @ericgui 可以给个链接看一下吗? 6 万个点不会卡
    Tomotoes
        32
    Tomotoes  
       2020-03-30 19:15:14 +08:00 via Android
    其实懒加载还有一个弊端楼上没有提,就是一般的 rss 阅读器,网页图片会换不过来。
    jigi330
        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 的阈值。
    ericgui
        34
    ericgui  
       2020-03-31 02:15:23 +08:00 via Android
    @stillyu toB 的业务
    mostkia
        35
    mostkia  
       2020-03-31 13:35:54 +08:00
    等普及了才能真正用上吧,前端就兼容性这些破事,要说学习,大都也是学怎么造轮子。。
    serenader
        36
    serenader  
       2020-03-31 16:46:32 +08:00
    前面说懒加载没用的估计都不是前端开发者吧。在我看来,图片懒加载不仅仅只是用来减少带宽压力,更重要的是它能实实在在地提升页面的加载性能,能够让你的性能数据更好看。

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

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

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

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

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

    另外对于楼主提到的 loading="lazy" 这个特性来说,目前很少浏览器支持,我个人建议可以做个兼容,低版本浏览器使用 IntersectionObserver 来进行懒加载。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1940 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 16:21 · PVG 00:21 · LAX 09:21 · JFK 12:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.