JavaScript几种图片懒加载的实现方式

发布时间：2025-09-21 00:53:44 阅读量： 0 来源： 互联网转载

图片懒加载，顾名思义，是指当图片在当前视窗内不可见时不加载该图片，当图片在当前视窗内可见时再加载该图片。它的主要目的是提高网页加载的性能和体验。这篇文章将介绍几种常用的 JavaScript 实现图片懒加载的方法

第一种方法：基于 IntersectionObserver Api

IntersectionObserver API 是一个异步接口，可以监视 DOM 元素与父元素或祖先元素的交叉情况。它可以通过设置一个阈值，来控制图片加载的时机。

如果你的应用支持使用 IntersectionObserver API，那么使用它可以非常简单。下面是代码实现：

// 创建一个 IntersectionObserver 对象Const observer = new IntersectionObserver(entries => {  // 遍历所有的图片元素  entries.forEach(entry => {    // 当图片在当前视窗内可见时    if (entry.isIntersecting) {      // 加载图片      const img = entry.target;      img.src = img.dataset.src;      // 取消对该图片的监视      observer.unobserve(img);    }  });});// 获取所有需要懒加载的图片元素const imgs = document.querySelectorAll('img[data-src]');// 为每个图片元素添加监视imgs.forEach(img => {  observer.observe(img);});

第二种方法：基于 getBoundingClientRect() 和 window.scrollYgetBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。window.scrollY 表示页面在垂直方向上滚动的距离。通过判断图片是否在当前视窗内，可以决定是否加载图片。

下面是代码实现：

const imgs = document.querySelectorAll('img[data-src]');const options = {  rootMargin: '0px 0px 50px 0px'};function loadImage(img) {  const src = img.getAttribute('data-src');  if (!src) return;  img.src = src;}const observer = new IntersectionObserver((entries, observer) => {  entries.forEach(entry => {    if (entry.isIntersecting) {      const img = entry.target;      loadImage(img);      observer.unobserve(img);    }  });}, options);imgs.forEach(img => {  observer.observe(img);});

第三种方法：基于 throttle 函数

throttle 函数可以控制函数的调用频率，防止函数的频繁调用，提高代码的性能。我们可以将懒加载的代码包装在 throttle 函数中，并且在页面滚动事件发生时调用该函数。

下面是代码实现：

const imgs = document.querySelectorAll('img[data-src]');function loadImage(img) {  const src = img.getAttribute('data-src');  if (!src) return;  img.src = src;}function handleScroll() {  imgs.forEach(img => {    const rect = img.getBoundingClientRect();    if (rect.top < window.innerHeight && rect.bottom > 0) {      loadImage(img);    }  });}window.addEventListener('scroll', throttle(handleScroll, 200));function throttle(fn, wait) {  Let inThrottle;  return function() {    const context = this;    const args = arguments;    if (!inThrottle) {      fn.Apply(context, args);      inThrottle = true;      setTimeout(() => (inThrottle = false), wait); } }; }

最后需要注意的是，在实际项目开发中，可能需要考虑图片加载的兼容性，特别是对于低版本的浏览器。因此我们可以使用 polyfill 来兼容低版本的浏览器。

总的来说，图片懒加载是一个非常有用的技巧，可以提高页面加载速度，提高用户体验。我们应该根据项目的需求，选择合适的方法来实现图片懒加载。另外，还有一种实现图片懒加载的方法是使用第三方库，如 lazyload.js、lozad.js、yall.js 等。这些库已经封装好了实现图片懒加载的逻辑，我们可以很方便地在项目中使用。下面是使用 yall.js 实现图片懒加载的代码：

// 引入 yall.jsimport yall from 'yall-js';// 初始化 yall.jsyall({  observeChanges: true,  threshold: 0.5});// 在页面中的图片标签中添加 data-src 属性<img data-src="path/to/image.jpg" alt="图片">

使用第三方库实现图片懒加载是最简单的方法，但是也有一些缺点，如体积较大，速度较慢等。因此，在实际项目开发中，我们需要考虑到项目的需求，合理选择实现方法。

总的来说，图片懒加载是一种非常有效的技巧，可以提高页面加载速度，提高用户体验。我们可以通过基于滚动事件、IntersectionObserver、throttle 函数和第三方库等多种方法来实现图片懒加载。在实际项目开发中，我们需要根据项目的需求，合理选择实现方法。

怎么知道是否进入可视区域了？

通过判断图片是否进入可视区域，决定是否加载图片是图片懒加载的核心逻辑。

在使用基于滚动事件和 throttle 函数实现图片懒加载的方法中，可以通过对图片的位置和页面的滚动位置进行判断，确定图片是否进入可视区域。

在使用 IntersectionObserver 实现图片懒加载的方法中，IntersectionObserver API 提供了一种更高效和简单的方法来判断元素是否进入可视区域。 IntersectionObserver API 会自动**目标元素和观察区域的交集，并在目标元素进入或离开可视区域时触发回调函数。

在使用第三方库实现图片懒加载的方法中，第三方库已经封装好了判断元素是否进入可视区域的逻辑，我们只需要在页面中正确配置图片标签即可。

综上所述，不同的实现方法有不同的判断元素是否进入可视区域的方法，但都可以很方便地实现图片懒加载的功能。

上一篇: javascript判断一个变量是否是数组的方法几种方法

下一篇: 华为 5G 供应链评估：外媒视角

JavaScript几种图片懒加载的实现方式

热门文章