lazyload.js 懒惰加载框架下载及使用
原创
lazyload.js 懒惰加载框架下载及使用
原创
用户3672714
发布于 2025-08-19 15:22:42
发布于 2025-08-19 15:22:42
代码可运行
运行总次数：0
代码可运行
🖥 lazyload.js 懒加载框架下载及使用指南
一、概述
- LazyLoad.js 是一款轻量级 JavaScript 图片懒加载库。
- 作用：页面初次加载只渲染可视区域的图片，滚动到图片位置时再加载，提升页面性能和加载速度。
- 官方仓库（GitHub）：https://github.com/verlok/lazyload
二、下载方式
1. 使用 npm 安装
npm install vanilla-lazyloadphp28 Bytes© 菜鸟-创作你的创作2. 直接引入 CDN
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.6.1/dist/lazyload.min.js"></script>php97 Bytes© 菜鸟-创作你的创作3. GitHub 下载
- 地址：https://github.com/verlok/lazyload
- 下载
lazyload.min.js放入项目目录即可使用。
三、HTML 图片设置
- 图片
src使用占位图或空值，真实图片地址放在data-src属性中：
<img class="lazy" data-src="example.jpg" alt="示例图片" width="300" height="200">php77 Bytes© 菜鸟-创作你的创作四、JavaScript 初始化
// 初始化 LazyLoadvar lazyLoadInstance = new LazyLoad({ elements_selector: ".lazy", // 懒加载图片选择器 threshold: 300, // 距离可视区多少像素开始加载 effect: "fadeIn", // 加载效果 callback_enter: function(element) { console.log("图片进入可视区: ", element); }});php285 Bytes© 菜鸟-创作你的创作常用配置参数
参数 | 说明 |
|---|---|
elements_selector | 选择懒加载的元素 |
threshold | 提前加载的距离（单位 px） |
effect | 图片加载显示效果，如 fadeIn |
callback_enter | 元素进入可视区回调 |
callback_load | 图片加载完成回调 |
callback_error | 图片加载失败回调 |
五、动态内容懒加载
- 对于动态插入的图片，需要手动更新：
lazyLoadInstance.update();php26 Bytes© 菜鸟-创作你的创作六、示例完整代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>LazyLoad 示例</title><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.6.1/dist/lazyload.min.js"></script><style> img { display: block; margin: 20px auto; width: 300px; height: 200px; }</style></head><body><img class="lazy" data-src="img1.jpg" alt="示例1"><img class="lazy" data-src="img2.jpg" alt="示例2"><img class="lazy" data-src="img3.jpg" alt="示例3"><script>var lazyLoadInstance = new LazyLoad({ elements_selector: ".lazy", threshold: 200, effect: "fadeIn", callback_load: function(element) { console.log("图片加载完成: ", element); }});</script></body></html>php684 Bytes© 菜鸟-创作你的创作💡 优化建议
- 为图片设置宽高，防止页面重排（CLS 问题）。
- 对长列表图片可配合分页或无限滚动，提升性能。
- 对大图可使用
srcset配合 LazyLoad，实现响应式加载。https://www.52runoob.com/archives/5959
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
