JS懒加载的几种实现方式

想要提升网站加载速度和用户体验？本文为你详细解读JS实现懒加载的几种高效方法！从监听滚动事件到利用Intersection Observer API，深入讲解如何针对图片、视频和iframe等不同资源进行优化。更进一步，探讨懒加载如何与图片压缩、响应式图片、WebP格式以及CDN加速等图片优化策略相结合，全方位提升页面性能。针对SPA应用，特别强调了MutationObserver监听动态元素、路由切换时的状态重置以及结合虚拟滚动优化长列表等关键技巧，确保动态内容也能流畅加载。掌握这些技巧，让你的网站加载速度更快，用户体验更上一层楼！

处理不同资源懒加载：图片通过data-src替换src实现，视频在进入视口后替换data-src并调用play()，iframe同样替换src并可使用占位符优化性能；2. 结合图片优化提升性能：采用图片压缩、响应式图片、WebP格式、CDN加速及低质量占位图等手段，与懒加载协同提升加载速度与用户体验；3. SPA中应用懒加载：需用MutationObserver监听动态元素添加，路由切换时重置懒加载状态，结合状态管理统一控制，并可配合虚拟滚动优化长列表性能，确保动态内容正确加载。

懒加载的核心在于优化页面加载速度，只在需要时才加载资源。这不仅仅是为了看起来更快，更是为了提升用户体验和节省带宽。

解决方案

JS实现懒加载主要通过以下几个步骤：

1. 监听滚动事件： 核心是监听scroll事件，判断元素是否进入可视区域。
2. 判断元素是否可见： 可以使用getBoundingClientRect()方法获取元素相对于视口的位置，然后判断其是否在视口内。
3. 替换资源： 当元素进入可视区域后，将data-src（或其他自定义属性）中的URL替换为src属性，触发资源加载。

一个简单的例子：

document.addEventListener('DOMContentLoaded', function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // 老旧浏览器兼容方案，可以使用节流函数优化性能
    function lazyLoad() {
      lazyImages.forEach(function(lazyImage) {
        if (isInViewport(lazyImage)) {
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
        }
      });
      lazyImages = lazyImages.filter(function(image) {
        return !image.classList.contains("lazy");
      });

      if (lazyImages.length === 0) {
        document.removeEventListener("scroll", lazyLoad);
        window.removeEventListener("resize", lazyLoad);
      }
    }

    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
    document.addEventListener("orientationchange", lazyLoad);
  }

  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
});

HTML结构类似：

如何处理不同类型的资源懒加载，例如图片、视频、iframe？

图片懒加载上面已经展示了，视频和iframe的思路类似。 对于视频，可以将视频的src属性替换为data-src，并在进入可视区域后，将data-src赋值给src，然后调用video.play()。 对于iframe，同样替换src属性，但需要注意iframe的加载可能会影响页面性能，可以考虑使用占位符。

一个更高级的方案是使用Intersection Observer API，它能更高效地监听元素是否进入可视区域，避免频繁的scroll事件监听。

懒加载如何与图片优化结合，提升页面性能？

懒加载只是优化页面加载速度的一个环节。 结合图片优化，效果更佳。

• 图片压缩： 使用工具压缩图片大小，减少传输时间。
• 响应式图片： 使用元素或srcset属性，根据设备屏幕大小加载不同尺寸的图片。
• WebP格式： 尝试使用WebP格式，它比JPEG和PNG具有更好的压缩率。
• CDN加速： 使用CDN加速图片资源的访问速度。
• 占位图： 在图片加载前，使用低质量的占位图，提升用户体验。

这些优化手段结合懒加载，能显著提升页面加载速度和用户体验。

懒加载在单页应用（SPA）中如何应用，有什么需要注意的地方？

在SPA中，由于页面内容是动态加载的，所以懒加载的应用场景更加复杂。

• 动态添加的元素： 需要监听DOM的变化，对新添加的元素应用懒加载。可以使用MutationObserver API监听DOM变化。
• 路由切换： 路由切换时，需要重置懒加载状态，确保新的页面元素也能正确应用懒加载。
• 状态管理： 可以将懒加载状态纳入状态管理，方便统一管理和控制。
• 虚拟滚动： 对于长列表，可以使用虚拟滚动技术，只渲染可视区域内的元素，配合懒加载，能有效提升性能。

总而言之，SPA中的懒加载需要更加细致的处理，需要考虑动态加载和状态管理等因素。

今天关于《JS懒加载的几种实现方式》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！