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

This topic created in 2672 days ago, the information mentioned may be changed or developed.

今天发下唯品会首页的图片会请求多次
过程如下
1. 页面自然向下滚动，懒加载图片自动显示出来
2. 继续往下翻动几屏（ 4+）
3. 然后向上翻，这时候会发下刚才已经懒加载出来的图片是空白的了（显示默认的背景图片）
4. 同时会再次触发一次图片 HTTP 请求

这样做的原因是什么？
为了浏览器内存占用不过高？看不到的图片自动销毁掉
还是说就是一个 BUG

Supplement 1 · Apr 18, 2019

知道原因了
每一个楼层（ floor，女装，男装这种）做了分页
一层最多 3 页所以页数过多就会销毁老的，显示新的
同时上下有两个空白的 div 用来把高度撑起来（让滚动条正常）

上下翻屏会导致不断的销毁创建图片就会请求多次

图片

唯品会

bug

请求

6 replies • 2019-04-18 13:08:12 +08:00

iTakeo

Apr 18, 2019

不是 bug 吧，懒加载插件的功能

geelaw

Apr 18, 2019 via iPhone

这更像是一个自作聪明的优化，浏览器可以自己完成虚拟化，不需要网站来做这些事情。你也看到了，这会导致一次新的 HTTP 请求，所以很蠢。

catoncat

Apr 18, 2019 via iPhone

@geelaw 浏览器自己可以完成虚拟化是什么意思？这个不是长列表常见的优化吗？

v2chou

Apr 18, 2019

我清晰的记得 4 年前一个面试，瀑布流优化的问题，好像说的是如果滚动了上千条，很多图片，怎么优化，面试官最后说的差不多就是这种方法滚动后把可视区外的节点删了，向上，向下滚动再去请求。

geelaw

Apr 18, 2019

@crs0910 #3 在这里虚拟化是指一种 UI 渲染技术，在内存中减少不可见元素占用的空间，比如当图片离目前的可见区域非常远的时候，把图片从内存中释放，下次图片需要显示的时候再从硬盘中拿出。

更常见的例子：假设你有一个 native app，里面有一个数据绑定+模板绑定的列表控件，那么列表控件实际上只需要生成可见区域里面最多显示的控件数目，当一个项目滚动到显示区域之外之后就把原来的控件挪作现在新显示的项目所用。

rabbbit

Apr 18, 2019

这个是 Dom 回收, 把瀑布上看不到的 Dom 收走.往上翻的时候再加回来