当前位置：首页 > 文章列表 > 文章 > 前端 > JS懒加载的几种实现方式

JS懒加载的几种实现方式

2025-08-16 20:58:47 0浏览收藏

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

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

JS如何实现懒加载

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

解决方案

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

监听滚动事件： 核心是监听scroll事件，判断元素是否进入可视区域。
判断元素是否可见： 可以使用getBoundingClientRect()方法获取元素相对于视口的位置，然后判断其是否在视口内。
替换资源： 当元素进入可视区域后，将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结构类似：

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

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

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

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