jquery 懒加载

jQuery 懒加载实现方法

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

使用 jQuery Lazy 插件

jQuery Lazy 是一个轻量级的懒加载插件，支持图片、背景图、iframe 等多种内容。

1. 引入 jQuery 和 jQuery Lazy 在 HTML 文件中添加以下代码：

   <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. 标记需要懒加载的元素 为需要懒加载的图片添加 data-src 属性：

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

3. 初始化 Lazy 插件 在 JavaScript 中初始化插件：

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

4. 配置选项（可选） 可以配置延迟加载的触发条件、加载效果等：

   $('.lazy').Lazy({
       effect: 'fadeIn',
       effectTime: 1000,
       threshold: 200
   });

原生 jQuery 实现懒加载

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

1. 标记需要懒加载的元素 使用 data-src 存储真实图片路径：

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

2. 检测元素是否进入视口 检查元素是否在可视区域内：

   function isInViewport(element) {
       var rect = element.getBoundingClientRect();
       return (
           rect.top <= (window.innerHeight || document.documentElement.clientHeight)
       );
   }

3. 滚动事件触发加载 监听滚动事件并加载图片：

   $(window).on('scroll', function() {
       $('.lazy').each(function() {
           if (isInViewport(this)) {
               $(this).attr('src', $(this).data('src'));
               $(this).removeClass('lazy');
           }
       });
   });

4. 初始加载 页面加载时触发一次检查：

   $(window).trigger('scroll');

使用 Intersection Observer API

现代浏览器支持 Intersection Observer API，性能优于滚动事件监听。

1. 标记需要懒加载的元素

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

2. 创建 Observer 实例

   var observer = new IntersectionObserver(function(entries) {
       entries.forEach(function(entry) {
           if (entry.isIntersecting) {
               var img = entry.target;
               img.src = img.dataset.src;
               observer.unobserve(img);
           }
       });
   });

3. 观察所有懒加载元素

   

   $('.lazy').each(function() {
       observer.observe(this);
   });

注意事项

• 兼容性：如果使用 Intersection Observer API，需检查浏览器兼容性或引入 polyfill。
• 占位图：建议为懒加载图片设置占位图（如低分辨率预览图或纯色背景）。
• 性能优化：适当设置 threshold 或延迟加载的触发距离，避免频繁触发。
• SEO 友好：确保懒加载内容能被搜索引擎爬虫正确抓取。