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

基础用法

1. HTML 结构
   为图片添加 data-original 属性存储真实路径，src 使用占位图：

   <img class="lazy" data-original="real-image.jpg" src="placeholder.jpg">

2. 初始化 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 仍适用于需要复杂逻辑或兼容旧浏览器的场景。