天猫和京东的,图片懒加载是 JavaScript写的还是PHP控制的?

爱许乐
  • 179

最近我要写图片懒加载,我想知道天猫和京东的懒加载方式 原理。
感谢大神讲解。

回复
阅读 5.2k
10 个回答

作为JD员工回答下,图片懒加载是js实现的,实现思路是按楼层加载。

但是按楼层加载会有个问题,当用户滚动很快的时候就会出现很多loading动画,为了减少这种情况的发生,让用户觉得楼层加载很快,采用的方案是在用户操作的空闲时间自动加载剩余的楼层图片。

楼层加载是一个队列操作。当用户滚动的时候取消队列,当用户停止滚动时又重启队列。

js控制的,lazyloading 基本上都是js控制的。
原理就是当需要显示这个图片的时候才去加载图片,和那种瀑布流很类似。这样可以有效的节省流量。

可以使用lazyload的库,基本原理就是在写页面的时候不把地址写在src里,而写在比方说data-src里,然后监听页面滚动高度,在高度到对应位置时,使用js新建image对象,赋值src,对象加载完成时回调函数讲data-src的地址写入对应的src。

你可以用js写,在你需要浏览到某张图的时候才去加载,或者你提前预加载一张;判断时机一般都是滚动高度

京东 天猫后台都不是用php写的

从IO压力上也会放到前端处理,这种海量并发的业务肯定不会频繁操作后台来控制前台输出。

是用js加载的,用lazyload.js实现的

宣传栏