V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Livid
V2EX  ›  前端开发

Chrome 75 里开始支持的一个新的图片标签上的试验特性 loading="lazy"

  •  
  •   Livid · 2019-06-14 11:44:47 +08:00 · 3768 次点击
    这是一个创建于 1749 天前的主题,其中的信息可能已经有所发展或是发生改变。

    chrome://flags 里找到 #enable-lazy-image-loading 然后 Enable。就可以用下面这样的代码实现快要滚动到显示区域时才加载图片。

    <img loading="lazy" src="..." />
    

    See also:

    https://caniuse.com/#feat=loading-lazy-attr

    12 条回复    2019-06-14 22:49:09 +08:00
    qq316107934
        1
    qq316107934  
       2019-06-14 11:47:04 +08:00
    赞,以后懒加载不需要引用额外的 JS 了,就是这个特性上的太晚,兼容性堪忧,拓展到其他平台和浏览器估计要等上一年。
    Terry05
        2
    Terry05  
       2019-06-14 11:47:48 +08:00
    可是。。。这个特性只有 Chrome 才支持的吗
    Livid
        3
    Livid  
    MOD
    OP
       2019-06-14 11:48:25 +08:00
    @Terry05 最终会成为标准。可以提前在开发环境里测试和准备。
    66beta
        4
    66beta  
       2019-06-14 11:54:16 +08:00 via Android
    这才是龙头企业该做的事情
    liaoyaoheng
        5
    liaoyaoheng  
       2019-06-14 11:58:39 +08:00
    警告:现在依旧是实验项目,某些网页的图片会加载不全。

    jd.com 的商品详情的图片。
    winterbells
        6
    winterbells  
       2019-06-14 11:58:43 +08:00 via Android   ❤️ 2
    @Terry05 凡是 Chrome 做出的决策,我们都坚决维护;凡是 Chrome 的指示,我们都始终不渝地遵循 [:doge]
    agagega
        7
    agagega  
       2019-06-14 12:14:22 +08:00 via iPhone
    Firefox:我们马上跟进
    anyclue
        8
    anyclue  
       2019-06-14 12:48:51 +08:00   ❤️ 1
    不知道这个特性最终是怎样的,假设页面包含大量图片,正常匀速滚动,如果上面的图还没加载出来,直接滚到下面等下面的图,这个时候上面的图加载出来了会挤下面图的位置,这个时候,页面图片加载挤的你就不知道你刚才停留的位置在哪,要找的图在哪,页面自己在动

    尤其是在图片加载不够快,你滚动的频繁的情况下
    iRiven
        9
    iRiven  
       2019-06-14 12:51:20 +08:00 via Android
    必须赞
    cest
        10
    cest  
       2019-06-14 12:56:53 +08:00   ❤️ 3
    @anyclue
    img 没有 width height 的前端都该问斩
    JerryBean
        11
    JerryBean  
       2019-06-14 13:02:47 +08:00
    只希望 chrome 的 bfcache 尽快上
    lxml
        12
    lxml  
       2019-06-14 22:49:09 +08:00
    @Livid #3 livid 能加上 webassembly 的 tag 么,感觉这个话题可以开始讨论起来了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1024 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:30 · PVG 06:30 · LAX 15:30 · JFK 18:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.