jquery 懒加载

jQuery 懒加载实现方法

懒加载（Lazy Load）是一种优化网页性能的技术，延迟加载图片或其他资源，直到用户滚动到它们附近时才加载。以下是使用 jQuery 实现懒加载的几种方法。

使用 jQuery Lazy 插件

jQuery Lazy 是一个轻量级的懒加载插件，支持图片、背景图等多种资源的延迟加载。

1. 引入 jQuery 和 jQuery Lazy 插件

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-lazy@1.7.11/jquery.lazy.min.js"></script>

2. 初始化懒加载

   $(function() {
    $('.lazy').Lazy();
   });

3. HTML 标记

   

   <img class="lazy" data-src="path/to/image.jpg" alt="Lazy loaded image">

自定义 jQuery 懒加载

如果不使用插件，可以通过监听滚动事件实现懒加载。

1. HTML 标记

   <img class="lazy" data-src="path/to/image.jpg" alt="Lazy loaded image">

2. jQuery 代码

   

   $(document).ready(function() {
    $(window).on('scroll', function() {
        $('.lazy').each(function() {
            if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
                $(this).attr('src', $(this).data('src'));
                $(this).removeClass('lazy');
            }
        });
    }).trigger('scroll');
   });

使用 Intersection Observer API

Intersection Observer API 是现代浏览器提供的更高效的懒加载方案，配合 jQuery 使用。

1. HTML 标记

   <img class="lazy" data-src="path/to/image.jpg" alt="Lazy loaded image">

2. jQuery 代码

   $(document).ready(function() {
    if ('IntersectionObserver' in window) {
        const lazyImages = $('.lazy');
        const imageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    const lazyImage = $(entry.target);
                    lazyImage.attr('src', lazyImage.data('src'));
                    lazyImage.removeClass('lazy');
                    imageObserver.unobserve(entry.target);
                }
            });
        });
   
        lazyImages.each(function() {
            imageObserver.observe(this);
        });
    } else {
        // Fallback for older browsers
        $(window).on('scroll', function() {
            $('.lazy').each(function() {
                if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
                    $(this).attr('src', $(this).data('src'));
                    $(this).removeClass('lazy');
                }
            });
        }).trigger('scroll');
    }
   });

优化建议

• 添加占位符图片或背景色，避免布局抖动。
• 设置适当的阈值（threshold），提前加载图片。
• 对移动端和桌面端分别优化触发条件。
• 考虑使用 loading="lazy" 原生属性作为备用方案。

以上方法可根据项目需求选择，插件方案适合快速实现，自定义方案更灵活，Intersection Observer API 性能最佳。