jquery图片延迟加载

在jQuery中实现图片延迟加载（Lazy Loading）通常是为了优化网页的加载速度和性能，尤其是在处理包含大量图片的页面时。这里提供一个简单的jQuery示例，用于实现图片的延迟加载。

首先，你需要确保你的页面已经加载了jQuery库。然后，你可以使用以下代码来实现图片的延迟加载：

$(document).ready(function() {
    // 设定一个阈值，比如图片距离视窗顶部小于这个值时开始加载
    var threshold = 500;

    // 监听滚动事件
    $(window).scroll(function() {
        // 获取所有图片元素，这里假设它们都有一个特定的类名，如'lazy'
        $('.lazy').each(function() {
            var $img = $(this);

            // 检查图片是否已经在视窗中（或接近视窗）
            if ($img.offset().top < ($(window).scrollTop() + $(window).height() + threshold)) {
                // 图片进入视窗，加载图片
                var src = $img.data('src'); // 假设图片的真实URL存储在data-src属性中
                if (src) {
                    $img.attr('src', src);
                    // 可选：加载完成后，移除或更改类名以避免重复加载
                    $img.removeClass('lazy').addClass('loaded');
                }
            }
        });
    });

    // 初始化时，也检查页面顶部的图片是否需要加载
    $(window).trigger('scroll');
});

在这个示例中，你需要在HTML中将原本应该直接放在`src`属性中的图片URL改为放在`data-src`属性中，并将图片的`src`属性设置为一个占位符图片（或者留空），同时给这些图片添加一个类名（如`lazy`），以便jQuery能够选中它们。

例如：

<img class="lazy" data-src="real-image-url.jpg" src="placeholder.jpg" alt="Lazy loaded image">

请注意，这个简单的示例假设了所有图片都在页面加载时就需要检查是否进入视窗。在真实场景中，你可能需要进一步优化这个逻辑，比如使用节流（throttle）或防抖（debounce）技术来减少滚动事件的处理频率，或者利用现有的jQuery插件（如jquery.lazyload）来实现更复杂的延迟加载逻辑。