扫码关注官方订阅号
最近我要写图片懒加载,我想知道天猫和京东的懒加载方式 原理。感谢大神讲解。
认证高级PHP讲师
作为JD员工回答下,图片懒加载是js实现的,实现思路是按楼层加载。
但是按楼层加载会有个问题,当用户滚动很快的时候就会出现很多loading动画,为了减少这种情况的发生,让用户觉得楼层加载很快,采用的方案是在用户操作的空闲时间自动加载剩余的楼层图片。
楼层加载是一个队列操作。当用户滚动的时候取消队列,当用户停止滚动时又重启队列。
lazyload.js
js控制的,lazyloading 基本上都是js控制的。原理就是当需要显示这个图片的时候才去加载图片,和那种瀑布流很类似。这样可以有效的节省流量。
可以使用lazyload的库,基本原理就是在写页面的时候不把地址写在src里,而写在比方说src里,然后监听页面滚动高度,在高度到对应位置时,使用js新建image对象,赋值src,对象加载完成时回调函数讲src的地址写入对应的src。
http://www.cnblogs.com/yzg1/p...
你可以用js写,在你需要浏览到某张图的时候才去加载,或者你提前预加载一张;判断时机一般都是滚动高度
京东 天猫后台都不是用php写的
肯定是 JS 啊,可以参考我以前写的文章:
http://www.cnblogs.com/zichi/...
从IO压力上也会放到前端处理,这种海量并发的业务肯定不会频繁操作后台来控制前台输出。
是用js加载的,用lazyload.js实现的
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
作为JD员工回答下,图片懒加载是js实现的,实现思路是按楼层加载。
但是按楼层加载会有个问题,当用户滚动很快的时候就会出现很多loading动画,为了减少这种情况的发生,让用户觉得楼层加载很快,采用的方案是在用户操作的空闲时间自动加载剩余的楼层图片。
楼层加载是一个队列操作。当用户滚动的时候取消队列,当用户停止滚动时又重启队列。
lazyload.js
js控制的,lazyloading 基本上都是js控制的。
原理就是当需要显示这个图片的时候才去加载图片,和那种瀑布流很类似。这样可以有效的节省流量。
可以使用lazyload的库,基本原理就是在写页面的时候不把地址写在src里,而写在比方说src里,然后监听页面滚动高度,在高度到对应位置时,使用js新建image对象,赋值src,对象加载完成时回调函数讲src的地址写入对应的src。
http://www.cnblogs.com/yzg1/p...
你可以用js写,在你需要浏览到某张图的时候才去加载,或者你提前预加载一张;判断时机一般都是滚动高度
京东 天猫后台都不是用php写的
肯定是 JS 啊,可以参考我以前写的文章:
http://www.cnblogs.com/zichi/...
http://www.cnblogs.com/zichi/...
从IO压力上也会放到前端处理,这种海量并发的业务肯定不会频繁操作后台来控制前台输出。
是用js加载的,用lazyload.js实现的