基于JavaScript+IntersectionObserver实现高性能图片懒加载-牛翰网

一、前言

在 Web 开发中，图片懒加载是一种常见的优化手段，尤其在长列表页面中，按需加载图片可以显著提升页面性能。本篇文章将通过 JavaScript 和 Intersection Observer，实现一个带有卡片样式的高性能图片懒加载示例。

二、样式布局

以下是卡片列表的样式，采用了 CSS Grid 布局，支持响应式排列，并为图片卡片添加了缩放动画效果：

body {
  background-color: #f5f6f7;
}

.card-list {
  --ap-gap: 16px; /* 列表项的间距 */
  --ap-min-width: 300px; /* 列表项的最小宽度 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ap-min-width), 1fr));
  gap: var(--ap-gap);
  padding: 16px;
}

.card-list .item {
  cursor: pointer;
  height: 497px;
  border-radius: 10px;
  box-shadow: 0 0 6px #000;
  overflow: hidden;
}

.card-list .item:hover img {
  transform: scale(1.5);
}

.card-list .item img {
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.32s;
}

上述样式不仅定义了图片卡片的基本外观，还支持鼠标悬停时的动态缩放效果，提升了用户体验。

三、HTML 结构

页面结构简单明了，通过 JavaScript 动态生成卡片列表：

<div class="card-list"></div>

四、实现逻辑

1、配置项与生成图片卡片

通过以下代码，动态生成 99 张图片卡片，使用默认占位图提高页面加载速度：

const TOTAL_ITEMS = 99;
const DEFAULT_IMG = './img/default.jpg';
const IMG_URL_TEMPLATE = (index) => `https://picsum.photos/400/600?r=${index}`;

const cardList = document.querySelector('.card-list');

function generateItems() {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < TOTAL_ITEMS; i++) {
    const div = document.createElement('div');
    div.classList.add('item');
    const img = document.createElement('img');
    img.src = DEFAULT_IMG;
    img.dataset.src = IMG_URL_TEMPLATE(i);
    img.alt = `Image ${i + 1}`;
    div.appendChild(img);
    fragment.appendChild(div);
  }
  cardList.appendChild(fragment);
}
generateItems();

2、使用 Intersection Observer 实现懒加载

通过 Intersection Observer，可以高效检测图片是否进入视口，并在合适的时机加载真实图片：

function initLazyLoad() {
  const observer = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      });
    },
    { threshold: 0.01 }
  );

  document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));
}
initLazyLoad();

本文通过样式优化和 Intersection Observer，有效提升了图片懒加载的性能，同时保持了良好的用户体验。这种实现方式不仅适用于图片懒加载，也可以扩展到其它按需加载场景，如视频或组件加载。

到此这篇关于基于JavaScript+IntersectionObserver实现高性能图片懒加载的文章就介绍到这了,更多相关JavaScript IntersectionObserver图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/3339410vn.htm

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END