jquery.lazyload
jQuery LazyLoad 简介
jQuery LazyLoad 是一个轻量级的插件，用于延迟加载页面中的图片或其他内容，仅在用户滚动到可视区域时加载资源，从而提升页面加载速度和性能。
基本用法
引入依赖
确保页面已加载 jQuery，随后引入 LazyLoad 插件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>HTML 结构
将需要延迟加载的图片的 src 属性替换为 data-original，并添加占位符：
<img class="lazy" data-original="image.jpg" width="600" height="400" alt="示例图片">初始化插件
通过 jQuery 选择器调用 lazyload() 方法：
$(document).ready(function() {
$("img.lazy").lazyload();
});配置选项
阈值（threshold）
指定提前加载的像素范围。例如，距离可视区域 200 像素时开始加载：
$("img.lazy").lazyload({
threshold: 200
});加载效果（effect）
设置图片加载时的动画效果，如淡入：
$("img.lazy").lazyload({
effect: "fadeIn"
});自定义事件触发
通过事件触发加载（如点击按钮）：
$("img.lazy").lazyload({
event: "click"
});注意事项
- 失效问题：动态添加的图片需重新调用
lazyload()。 - SEO 优化：确保图片有默认的
alt属性以支持搜索引擎抓取。 - 兼容性：适用于现代浏览器，部分旧版本需测试。
替代方案
若需更现代的解决方案，可考虑原生 loading="lazy" 属性或其他库如 lozad.js。
<img src="image.jpg" loading="lazy" alt="原生延迟加载">
