jquery.lazyload.js
jQuery LazyLoad.js 简介
jQuery LazyLoad.js 是一个轻量级的 jQuery 插件，用于延迟加载页面中的图片或其他资源。当用户滚动到可视区域时，插件才会加载实际内容，从而减少初始页面加载时间，提升性能。
核心功能
- 延迟加载：仅加载当前可视区域内的图片，其他图片在滚动到视口时加载。
- 自定义触发条件：支持通过滚动、事件或手动触发加载。
- 占位符支持：可设置默认占位图片，避免布局跳动。
安装与引入
通过 CDN 引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>或通过 npm 安装：
npm install jquery-lazyload --save基础用法
-
HTML 结构
为图片添加data-original属性存储真实路径，src使用占位图：<img class="lazy" data-original="real-image.jpg" src="placeholder.jpg"> -
初始化 LazyLoad
调用lazyload()方法并配置参数：
$("img.lazy").lazyload({ effect: "fadeIn", // 加载时的动画效果 threshold: 200, // 提前200像素加载 placeholder: "placeholder.jpg" // 默认占位图 });
常用配置参数
threshold：触发加载的提前距离（像素）。effect：加载动画（如"fadeIn"）。event：自定义触发事件（如"click"）。failure_limit：加载失败时的重试次数。
高级用法
动态内容加载
若图片通过 AJAX 动态插入，需手动触发更新：
$("img.lazy").lazyload().trigger("appear");背景图延迟加载
支持对 CSS 背景图延迟加载：
$("div.lazy").lazyload({
effect: "fadeIn",
data_attribute: "original-background" // 自定义属性名
});注意事项
- 依赖 jQuery 1.7+ 版本。
- 对 SEO 友好，但需确保搜索引擎能解析 JavaScript。
- 可通过
skip_invisible: false加载隐藏元素。
替代方案
现代浏览器已支持原生延迟加载：
<img loading="lazy" src="image.jpg" alt="">但 jQuery LazyLoad 仍适用于需要复杂逻辑或兼容旧浏览器的场景。
