快捷導(dǎo)航

JavaScript實現(xiàn)圖片懶加載的完整代碼

更新時間：2026年05月06日 09:21:03 作者：當(dāng)時只道尋常

本文基于原生 JavaScript IntersectionObserver API 實現(xiàn)的圖片懶加載方案知識庫說明,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下

文檔概述

本文基于原生 JavaScript IntersectionObserver API 實現(xiàn)的圖片懶加載方案知識庫說明，通過監(jiān)聽元素與視口的交叉狀態(tài)，僅在圖片進(jìn)入視口時加載真實圖片，減少初始頁面加載資源消耗，提升頁面性能與用戶體驗。

核心特性

原生 API 實現(xiàn)：基于 IntersectionObserver，無需引入第三方庫，兼容性良好
性能優(yōu)化：使用 DocumentFragment 批量操作 DOM，減少重繪重排
占位圖策略：初始加載默認(rèn)占位圖，進(jìn)入視口后替換為真實圖片
自動停止觀察：圖片加載完成后自動取消觀察，避免重復(fù)觸發(fā)
視覺交互：包含卡片懸停縮放效果、自定義滾動條樣式，提升用戶體驗

依賴說明

核心技術(shù)：原生 JavaScript（ES6+）、HTML5、CSS3

瀏覽器兼容性：支持 IntersectionObserver API 的現(xiàn)代瀏覽器（Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+）

外部資源：

默認(rèn)占位圖：https://pica.zhimg.com/v2-f052aa50ca65df4bad1c3b7e4084d00e_1440w.jpg
動態(tài)圖片模板：https://picsum.photos/400/600?r={index}

完整代碼實現(xiàn)

1. HTML 結(jié)構(gòu)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>JavaScript Observer 實現(xiàn)懶加載</title>
  <link rel="stylesheet" href="./css/index.css" rel="external nofollow"  />
</head>
<body>
  <div class="card-list"></div>
  <script src="./js/index.js"></script>
</body>
</html>

2. CSS 樣式

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
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;
}
/* 自定義滾動條樣式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track-piece {
  border-radius: 6px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
::-webkit-scrollbar-thumb:active {
  background-color: #787878;
}
::-webkit-scrollbar-corner {
  background-color: #f5f5f5;
}
::-webkit-resizer {
  background-repeat: no-repeat;
  background-position: bottom right;
}

3. JavaScript 邏輯

// 配置項
const TOTAL_ITEMS = 99; // 總圖片數(shù)量
const DEFAULT_IMG = 'https://pica.zhimg.com/v2-f052aa50ca65df4bad1c3b7e4084d00e_1440w.jpg'; // 默認(rèn)占位圖
const IMG_URL_TEMPLATE = (index) => `https://picsum.photos/400/600?r=${index}`; // 動態(tài)圖片模板

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

/**
 * 生成圖片卡片
 * 使用 DocumentFragment 批量操作 DOM，減少重繪重排
 */
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; // 初始設(shè)置占位圖
    img.dataset.src = IMG_URL_TEMPLATE(i); // 真實圖片地址存儲在 data-src
    img.alt = `Image ${i + 1}`;
    
    div.appendChild(img);
    fragment.appendChild(div);
  }
  cardList.appendChild(fragment); // 一次性插入所有元素
}

/**
 * 初始化 Intersection Observer
 * 監(jiān)聽圖片與視口的交叉狀態(tài)，實現(xiàn)懶加載
 */
function initLazyLoad() {
  const observer = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return; // 跳過未進(jìn)入視口的元素
        
        const img = entry.target;
        img.src = img.dataset.src; // 替換為真實圖片
        observer.unobserve(img); // 加載完成后停止觀察
      });
    },
    {
      threshold: 0.01, // 交叉閾值：元素 1% 進(jìn)入視口時觸發(fā)
    }
  );

  // 觀察所有帶有 data-src 屬性的圖片
  document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));
}

// 執(zhí)行主邏輯
generateItems();
initLazyLoad();

核心實現(xiàn)說明

圖片卡片生成

DocumentFragment 優(yōu)化：使用文檔片段暫存所有卡片元素，最后一次性插入 DOM，避免多次操作 DOM 導(dǎo)致的性能損耗
占位圖策略：初始 img.src 設(shè)置為默認(rèn)占位圖，真實圖片地址存儲在 data-src 自定義屬性中
動態(tài)圖片地址：通過模板函數(shù) IMG_URL_TEMPLATE 生成唯一的動態(tài)圖片地址，避免緩存

Intersection Observer 初始化

交叉閾值（threshold） ：設(shè)置為 0.01，即圖片 1% 進(jìn)入視口時觸發(fā)加載，提前加載提升流暢度
回調(diào)處理：遍歷所有觀察項，僅處理進(jìn)入視口的元素（entry.isIntersecting 為 true）
自動停止觀察：圖片加載完成后調(diào)用 observer.unobserve(img)，避免重復(fù)觸發(fā)回調(diào)，節(jié)省性能

API 說明

IntersectionObserver 配置

配置項	類型	默認(rèn)值	說明
`threshold`	number	0	元素與視口的交叉比例閾值，達(dá)到該比例時觸發(fā)回調(diào)
`root`	Element	null	觀察的根元素，默認(rèn)為視口
`rootMargin`	string	'0px'	根元素的外邊距，用于提前或延遲觸發(fā)

核心方法

方法名	說明
`observe(target)`	開始觀察目標(biāo)元素
`unobserve(target)`	停止觀察目標(biāo)元素
`disconnect()`	停止觀察所有元素

使用示例

直接在瀏覽器中打開 HTML 文件即可體驗：

頁面初始加載 99 個帶占位圖的卡片
滾動頁面，卡片進(jìn)入視口時自動加載真實圖片
鼠標(biāo)懸停卡片，圖片放大 1.5 倍
滾動條樣式自定義，提升視覺體驗

注意事項

瀏覽器兼容性：IntersectionObserver 在 IE 及舊版本瀏覽器中不支持，如需兼容可引入 polyfill（如 intersection-observer）
占位圖優(yōu)化：建議使用尺寸較小的占位圖，減少初始加載資源
圖片地址有效性：確保 data-src 存儲的真實圖片地址可訪問
性能擴(kuò)展：可結(jié)合 loading="lazy" 屬性（原生懶加載）作為降級方案
錯誤處理：可添加圖片加載失敗的回調(diào)，替換為錯誤占位圖
閾值調(diào)整：可根據(jù)實際需求調(diào)整 threshold 值，平衡加載時機(jī)與性能