jquery延迟加载
jQuery延迟加载的实现方法
延迟加载（Lazy Load）是一种优化网页性能的技术，用于延迟加载非关键资源（如图片、iframe等），直到用户滚动到它们附近时才加载。以下是几种常见的实现方式：
使用jQuery Lazy插件
jQuery Lazy插件是一个轻量级的延迟加载库，支持图片、背景图、iframe等多种内容。
安装插件：
<script src="https://cdn.jsdelivr.net/npm/jquery-lazy@1.7.11/jquery.lazy.min.js"></script>基本用法：
$("img.lazy").lazy({
effect: "fadeIn",
effectTime: 1000,
threshold: 200
});HTML标记：
<img class="lazy" data-src="image.jpg" alt="">原生jQuery实现
如果不希望使用插件，可以用原生jQuery实现简单的延迟加载：
$(window).on("scroll", function() {
$("img[data-src]").each(function() {
if (isInViewport($(this))) {
$(this).attr("src", $(this).data("src")).removeAttr("data-src");
}
});
});
function isInViewport(element) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var elementOffset = element.offset().top;
return (elementOffset < (scrollTop + windowHeight + 200));
}Intersection Observer API实现
现代浏览器支持Intersection Observer API，性能更好：
if ('IntersectionObserver' in window) {
const lazyImages = $("img[data-src]");
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
imageObserver.unobserve(img);
}
});
});
lazyImages.each(function() {
imageObserver.observe(this);
});
}延迟加载的注意事项
- 设置适当的占位图或加载动画提升用户体验
- 对于SEO关键图片，考虑预加载或使用noscript标签
- 移动端需要调整触发阈值
- 实现错误处理机制，加载失败时显示备用内容
- 结合图片的srcset和sizes属性实现响应式延迟加载
性能优化建议
- 使用requestAnimationFrame优化滚动事件处理
- 实现去抖动（debounce）机制减少事件触发频率
- 对已加载的元素取消事件监听
- 考虑结合WebP等现代图片格式进一步优化
- 对于大量元素，实现分批加载策略
