好的阿杰，我帮你整理一个 lazyload.js 懒加载框架下载与使用指南，包括获取方式、基本用法和实用技巧。

🖥 lazyload.js 懒加载框架下载及使用指南

一、概述

  • LazyLoad.js 是一款轻量级 JavaScript 图片懒加载库。
  • 作用：页面初次加载只渲染可视区域的图片，滚动到图片位置时再加载，提升页面性能和加载速度。
  • 官方仓库（GitHub）：https://github.com/verlok/lazyload

二、下载方式

1. 使用 npm 安装

npm install vanilla-lazyload

2. 直接引入 CDN

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.6.1/dist/lazyload.min.js"></script>

3. GitHub 下载

三、HTML 图片设置

  • 图片 src 使用占位图或空值，真实图片地址放在 data-src 属性中：
<img class="lazy" data-src="example.jpg" alt="示例图片" width="300" height="200">

四、JavaScript 初始化

// 初始化 LazyLoad
var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy",   // 懒加载图片选择器
    threshold: 300,               // 距离可视区多少像素开始加载
    effect: "fadeIn",             // 加载效果
    callback_enter: function(element) {
        console.log("图片进入可视区: ", element);
    }
});

常用配置参数

参数说明
elements_selector选择懒加载的元素
threshold提前加载的距离（单位 px）
effect图片加载显示效果，如 fadeIn
callback_enter元素进入可视区回调
callback_load图片加载完成回调
callback_error图片加载失败回调

五、动态内容懒加载

  • 对于动态插入的图片，需要手动更新：
lazyLoadInstance.update();

六、示例完整代码

<!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>

💡 优化建议

  1. 为图片设置宽高，防止页面重排（CLS 问题）。
  2. 对长列表图片可配合分页或无限滚动，提升性能。
  3. 对大图可使用 srcset 配合 LazyLoad，实现响应式加载。