jquery 分段加载页面

基础概念

jQuery 分段加载页面（也称为懒加载或按需加载）是一种网页优化技术，它允许网页内容在用户滚动到特定位置时才被加载。这种技术可以显著提高网页的加载速度和用户体验，因为它减少了初始加载时间，并且只在需要时加载内容。

优势

提高加载速度：通过延迟加载非关键内容，可以减少初始页面加载时间。
节省带宽：只加载用户实际需要的内容，减少了不必要的数据传输。
提升用户体验：用户可以更快地看到主要内容，而不必等待所有内容一次性加载完成。

类型

图片懒加载：只有当图片进入视口时才加载图片。
内容懒加载：只有当用户滚动到某个部分时，才加载该部分的内容。
无限滚动：当用户滚动到页面底部时，自动加载更多内容。

应用场景

图片密集型网站，如摄影网站、电商网站等。
新闻网站，用户滚动查看更多文章时加载新内容。
社交媒体平台，如动态、帖子等。

示例代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Load Images</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }
        .lazy {
            background-image: url('placeholder.jpg');
            background-size: cover;
            background-position: center;
        }
    </style>
</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>