jquery懒加载
jQuery 懒加载的实现方法
懒加载（Lazy Load）是一种优化网页性能的技术，延迟加载非关键资源（如图片），直到用户滚动到它们附近时才加载。jQuery 可以简化懒加载的实现。
基础实现方式
使用 jQuery 实现懒加载的核心逻辑是通过监听滚动事件，检查元素是否进入可视区域，再动态加载资源。
$(document).ready(function() {
// 选择所有需要懒加载的元素，例如带有 data-src 属性的图片
$("img[data-src]").each(function() {
// 初始时将真实的 src 存储在 data-src，用占位图或空代替
$(this).attr("src", "placeholder.jpg");
});
// 监听滚动事件
$(window).scroll(function() {
$("img[data-src]").each(function() {
if (isElementInViewport($(this))) {
// 当元素进入视口时，加载真实的图片
$(this).attr("src", $(this).data("src"));
$(this).removeAttr("data-src"); // 移除 data-src 避免重复加载
}
});
});
});
// 检查元素是否在视口中
function isElementInViewport(el) {
var rect = el[0].getBoundingClientRect();
return (
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth) &&
rect.bottom >= 0 &&
rect.right >= 0
);
}使用现成的 jQuery 插件
如果需要更完整的解决方案，可以使用专门的 jQuery 懒加载插件，如 jquery.lazyload。
-
引入插件文件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> -
初始化插件：
$(document).ready(function() { $("img.lazy").lazyload({ effect: "fadeIn", // 加载时的动画效果 threshold: 200 // 提前多少像素开始加载 }); }); -
HTML 结构：
<img class="lazy" data-original="image.jpg" width="600" height="400">
性能优化建议
- 对滚动事件进行防抖（debounce）处理，避免频繁触发检查。
- 初始加载时立即检查一次视口内的元素，避免用户需要滚动才能触发加载。
- 对于大量元素，考虑使用 Intersection Observer API（现代浏览器支持），比滚动事件更高效。
注意事项
- 确保懒加载内容在 JavaScript 禁用时仍有合理的回退方案。
- 图片应设置明确的宽度和高度，避免布局偏移。
- 考虑使用低质量图像占位符（LQIP）或模糊缩略图技术提升用户体验。
