VueLazyLoad如何实现图片懒加载功能？

本文共计2905个文字，预计阅读时间需要12分钟。

目录 + 背景 + 说明 + 实现原理

1.placeholder 实现细节丰富，生动活泼

2.添加图片缓存

3.事件监听使用节流

4.监听事件不停止滚动

5.事件队列处理懒加载

6.支持 data-srcset

7.自定义控件

目录

• 背景
• 说明
• 实现原理
• 1. placeholder 的实现很细致和灵活
• 2. 添加图片缓存
• 3. 事件监听使用节流
• 4. 监听事件不止滚动事件
• 5. 事件列队的方式来处理懒加载
• 6. 支持 data-srcset
• 7. 自定义控制可视区的判定范围
• 待完善
• 1. 没有解决布局抖动
• 2. 跳过已经加载图片的判断方式
• 3. 局部懒加载
• 4. 性能不是很好
• 5. observer 模式配置简单
• 6. SEO 不友好
• 总结

背景

上篇《图片懒加载原理方案详解》中详细解析了图片懒加载的原理和方案。主流方案有两个：

• 监听页面的滚动事件判断图片元素的 top 是否在页面可视区内。