当前位置：首页 > jquery

jquery延迟加载

2026-03-16 16:52:31jquery

jQuery延迟加载的实现方法

延迟加载（Lazy Load）是一种优化网页性能的技术，用于延迟加载非关键资源（如图片、iframe等），直到用户滚动到它们附近时才加载。以下是几种常见的实现方式：

使用jQuery Lazy插件

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

安装插件：

jquery延迟加载

<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标记：

jquery延迟加载

<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);
    });
}