jquery延迟加载

jQuery延迟加载的实现方法

延迟加载（Lazy Load）是一种优化网页性能的技术，特别适用于图片或内容较多的页面。以下是几种常见的jQuery延迟加载实现方式：

使用jQuery Lazy插件

jQuery Lazy是一个轻量级的延迟加载插件，支持图片、iframe等多种内容类型。

// 引入jQuery Lazy插件后
$("img.lazy").lazy({
    effect: "fadeIn",
    effectTime: 1000,
    threshold: 0
});

原生jQuery实现图片延迟加载

通过监听滚动事件判断元素是否进入可视区域。

$(window).on("scroll", function() {
    $("img.lazy").each(function() {
        if (isElementInViewport(this)) {
            $(this).attr("src", $(this).data("src"));
            $(this).removeClass("lazy");
        }
    });
});

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

Intersection Observer API实现

现代浏览器支持的更高效的延迟加载方案。

if ("IntersectionObserver" in window) {
    const lazyObserver = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                const lazyElement = entry.target;
                lazyElement.src = lazyElement.dataset.src;
                lazyObserver.unobserve(lazyElement);
            }
        });
    });

    $("img.lazy").each(function() {
        lazyObserver.observe(this);
    });
}

延迟加载的最佳实践

HTML标记示例

<img class="lazy" data-src="path/to/image.jpg" src="placeholder.jpg" alt="描述">

性能优化建议

设置适当的threshold值，提前开始加载 对容器内的内容使用延迟加载，而非整个页面 考虑添加加载动画提升用户体验 移动端需要特别测试触屏滚动效果

注意事项

确保有合适的占位元素防止布局跳动 对SEO敏感的内容应谨慎使用延迟加载 某些广告系统可能需要完全加载后才能正常显示

以上方法可根据实际项目需求选择使用，现代项目推荐优先考虑Intersection Observer方案，传统项目可使用jQuery插件实现兼容性更好的方案。