jquery 延迟加载js

基础概念

jQuery 延迟加载（Lazy Loading）是一种优化网页性能的技术，它允许在页面滚动到某个元素时才加载该元素的资源，而不是一次性加载所有资源。这种技术可以显著减少初始页面加载时间，提高用户体验。

类型

图片延迟加载：当用户滚动到图片位置时才加载图片。
视频延迟加载：当用户滚动到视频位置时才加载视频。
脚本延迟加载：当用户滚动到某个元素时才加载相关的 JavaScript 脚本。

应用场景

长页面：对于包含大量图片或视频的长页面，延迟加载可以显著提高加载速度。
移动设备：在移动设备上，由于带宽和性能限制，延迟加载尤为重要。
动态内容：对于动态加载的内容，延迟加载可以确保只有当内容可见时才加载相关资源。

示例代码

以下是一个简单的 jQuery 图片延迟加载的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading Images</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
        }
        .lazy {
            background-image: url('placeholder.jpg');
            background-size: cover;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img class="lazy" data-src="image1.jpg" alt="Image 1">
    <img class="lazy" data-src="image2.jpg" alt="Image 2">
    <img class="lazy" data-src="image3.jpg" alt="Image 3">
    <!-- More images -->

    <script>
        $(document).ready(function() {
            function lazyLoadImages() {
                $('.lazy').each(function() {
                    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
                        var src = $(this).data('src');
                        $(this).attr('src', src).removeClass('lazy');
                    }
                });
            }

            $(window).scroll(lazyLoadImages);
            lazyLoadImages(); // Initial check
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：图片加载顺序不正确

原因：当用户快速滚动页面时，图片可能会在它们应该显示的位置之前加载。

解决方法：使用 IntersectionObserver API 来更精确地控制图片的加载时机。

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback to jQuery method
        $(window).scroll(lazyLoadImages);
        lazyLoadImages();
    }
});

通过使用 IntersectionObserver，可以更高效地处理图片的延迟加载，避免加载顺序不正确的问题。