天猫和京东的,图片懒加载是 JavaScript写的还是PHP控制的?
PHP中文网
PHP中文网 2017-04-11 13:05:18
[JavaScript讨论组]

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

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(10)
天蓬老师

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

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

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

ringa_lee

lazyload.js

怪我咯

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

伊谢尔伦

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

巴扎黑

http://www.cnblogs.com/yzg1/p...

伊谢尔伦

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

伊谢尔伦

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

ringa_lee

肯定是 JS 啊,可以参考我以前写的文章:

  • http://www.cnblogs.com/zichi/...

  • http://www.cnblogs.com/zichi/...

高洛峰

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

黄舟

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号