jquery 后加载图片

基础概念

jQuery 后加载图片（Lazy Loading）是一种优化网页性能的技术，它允许网页上的图片在用户滚动到它们的位置时才加载，而不是一次性加载所有图片。这样可以减少初始页面加载时间，提高用户体验。

类型

基于滚动位置：当用户滚动到图片所在位置时，才加载图片。
基于视口：当图片进入浏览器视口时，才加载图片。
基于预加载：在用户接近图片位置时，提前加载图片。

应用场景

长页面：适用于包含大量图片的长页面，如图片库、新闻列表等。
移动设备：特别适用于移动设备，减少数据流量消耗，提高加载速度。
动态内容：适用于内容动态加载的网页，如无限滚动页面。

示例代码

以下是一个简单的 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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body>
    <img data-src="image1.jpg" alt="Image 1">
    <img data-src="image2.jpg" alt="Image 2">
    <img data-src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->

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

            $(window).scroll(function() {
                lazyLoadImages();
            });

            lazyLoadImages(); // 初始加载可见区域的图片
        });
    </script>
</body>
</html>