V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
ksc010
V2EX  ›  问与答

唯品会首页图片懒加载是特性还是 bug?

  •  
  •   ksc010 · 2019-04-18 10:15:01 +08:00 · 1466 次点击
    这是一个创建于 2082 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天发下 唯品会首页的图片 会请求多次
    过程如下
    1. 页面自然向下滚动 ,懒加载图片自动显示出来
    2. 继续往下翻动几屏( 4+)
    3. 然后向上翻,这时候会发下 刚才已经懒加载出来的图片是空白的了 (显示默认的背景图片)
    4. 同时会再次触发一次图片 HTTP 请求

    这样做的原因是什么?
    为了浏览器内存占用不过高?看不到的图片自动销毁掉
    还是说就是一个 BUG
    第 1 条附言  ·  2019-04-18 11:23:33 +08:00
    知道原因了
    每一个楼层( floor,女装,男装这种)做了分页
    一层最多 3 页 所以页数过多就会销毁老的,显示新的
    同时上下有两个空白的 div 用来把高度撑起来(让滚动条正常)

    上下翻屏 会导致不断的销毁创建 图片就会请求多次
    6 条回复    2019-04-18 13:08:12 +08:00
    iTakeo
        1
    iTakeo  
       2019-04-18 10:21:27 +08:00
    不是 bug 吧,懒加载插件的功能
    geelaw
        2
    geelaw  
       2019-04-18 10:23:04 +08:00 via iPhone
    这更像是一个自作聪明的优化,浏览器可以自己完成虚拟化,不需要网站来做这些事情。你也看到了,这会导致一次新的 HTTP 请求,所以很蠢。
    crs0910
        3
    crs0910  
       2019-04-18 11:33:53 +08:00 via iPhone
    @geelaw 浏览器自己可以完成虚拟化是什么意思?这个不是长列表常见的优化吗?
    v2chou
        4
    v2chou  
       2019-04-18 11:34:16 +08:00
    我清晰的记得 4 年前一个面试,瀑布流优化的问题,好像说的是如果滚动了上千条,很多图片,怎么优化,面试官最后说的差不多就是这种方法滚动后把可视区外的节点删了,向上,向下滚动再去请求。
    geelaw
        5
    geelaw  
       2019-04-18 13:00:08 +08:00   ❤️ 1
    @crs0910 #3 在这里虚拟化是指一种 UI 渲染技术,在内存中减少不可见元素占用的空间,比如当图片离目前的可见区域非常远的时候,把图片从内存中释放,下次图片需要显示的时候再从硬盘中拿出。

    更常见的例子:假设你有一个 native app,里面有一个数据绑定+模板绑定的列表控件,那么列表控件实际上只需要生成可见区域里面最多显示的控件数目,当一个项目滚动到显示区域之外之后就把原来的控件挪作现在新显示的项目所用。
    rabbbit
        6
    rabbbit  
       2019-04-18 13:08:12 +08:00
    这个是 Dom 回收, 把瀑布上看不到的 Dom 收走.往上翻的时候再加回来
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   907 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:55 · PVG 03:55 · LAX 11:55 · JFK 14:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.