什么是懶加載

只在數據或內容即將進入視口或即將需要的時候才加載。
實現懶加載的好處有:

1. 提高頁面加載速度和響應速度。只加載當前用戶需要或將要瀏覽到的數據,避免一次性加載大量不必要的數據。
2. 節省用戶流量。只加載用戶瀏覽到的數據,避免加載用戶未瀏覽的數據,特別是對于移動端用戶來說可以節省流量。
3. 優化用戶體驗。避免一次性加載大量數據導致頁面卡頓,appear突然出現,樣式渲染跳躍等影響用戶體驗的問題。
   實現懶加載的弊端有:
4. 首屏加載會較慢,而一些關鍵數據又需要首屏加載,需要權衡。
5. 需要監聽瀏覽器事件并判斷元素是否進入視口,稍微增加了開發難度。
6. 如果數據較多,需要加載的內容較長,用戶體驗還是會受到影響。懶加載并非銀彈,還需要結合其他優化手段。
7. 不利于 SEO。搜索引擎爬蟲抓取不到實際內容,抓取到的可能是 loading 占位圖等,影響網頁Indexed和排名。
   所以,懶加載是一種非常 useful 的技術,可以極大提高用戶體驗和網頁性能,但也有一定的弊端,需要權衡選擇。一般來說,對于加載的數據較多,頁面性能和流量較為關注的場景,懶加載是一個不錯的方案。但如果對 SEO 優化要求較高,或者加載的數據較少,也可以不使用懶加載。

實現圖片懶加載

頁面需要大量展示圖片時可以考慮使用懶加載。實現步驟如下：

1. 為圖片添加默認的 loading 圖片源和真實的 data-src 屬性:

<img src="loading.gif" data-src="real-img.jpg" />

2. 獲取所有圖片元素:

const images = document.querySelectorAll('img');

3. 監聽頁面滾動事件:

window.addEventListener('scroll', loadImages);

4. 定義 loadImages 函數來加載圖片:

function loadImages() {
  for (let i = 0; i < images.length; i++) {
    // 獲取圖片源和位置信息
    let imgSrc = images[i].dataset.src;
    let imgRect = images[i].getBoundingClientRect();
    
    if (imgRect.top < window.innerHeight && imgRect.left < window.innerWidth
     && imgRect.right > 0 && imgRect.bottom > 0) {  
      // 圖片進入視口,加載真實圖片源
      images[i].src = imgSrc;  
      images[i].addEventListener('load', () => { 
        images[i].style.opacity = 1;  // 淡入效果
      });
    } 
  }
}

5. 頁面初始化時調用一次 loadImages,防止某些圖片已進入視口但未加載:

loadImages();

6. 為避免加載較大圖片導致頁面卡頓,可以考慮在圖片加載完成后設置淡入效果:

images[i].addEventListener('load', () => { 
  images[i].style.opacity = 1;  
});

列表懶加載

這里提供一個核心代碼，根據自己項目加入即可

// 比如使用我有這樣一個
// 定義頁碼和加載條數
const pageSize = 10;   
let currentPage = 1;  

// list 代表擁有滾動條的元素, 看你代碼如何定義，可以是網頁窗口 window、div元素、ul列表等等
// 需要先獲取list 元素，再監聽列表中的元素進入視口事件,判斷元素位置并加載數據
list.addEventListener('scroll', () => {
  Array.from(list.children).forEach(elem => {
    let top = elem.offsetTop;
    let height = elem.clientHeight;
    if (top > 0 && top < window.innerHeight) {  
      // 元素進入視口,加載數據
      fetchData(currentPage);
      currentPage++;
    }
  });
}); 
// 定義 fetchData() 方法根據頁碼加載數據,并更新元素內容:
function fetchData(page) {
  // 發起請求,加載第page頁的數據，此處省略調用接口的代碼，根據自己代碼結構加入即可
  ...
  ...
  // 更新列表中符合頁碼的元素內容
  Array.from(list.children).forEach(elem => {
    if (elem.dataset.page === page) {  
      elem.innerHTML = ... // 加載的數據內容
    }
  });
} 
// 初始化加載第一頁數據,并為每個列表元素添加 data-page 屬性:
fetchData(1);
Array.from(list.children).forEach((elem, index) => {
  elem.dataset.page = index % 10 + 1;  // 每10個元素為一頁
});

列表滾動加載

如果是加載列表數據的話，這里提供一個實現滾動加載列表數據的代碼

// 1. 定義頁面大小、每頁加載條數和當前頁碼:
const pageSize = 10;     // 每頁10條數據 
const listHeight = 400;  // 比如列表容器高度400px 
let currentPage = 1;     // 當前頁碼
let scrollTop = 0;  // 上一次滾動條位置 

//  2. 綁定滾動事件,判斷滾動方向并加載數據:
list.addEventListener('scroll', () => {
  let scrollHeight = list.scrollHeight;  // 滾動內容高度
  let clientHeight = list.clientHeight;  // 視口高度
  let scrollDirection = scrollTop - list.scrollTop; 
  // 向下滾動
  if (scrollDirection > 0 && scrollHeight - clientHeight - list.scrollTop <= pageSize * 3) {
    // 滾動到底部,加載下一頁
    currentPage++;
    fetchData(currentPage); 
  } 
  
  // 向上滾動 
  if (scrollDirection < 0 && list.scrollTop <= pageSize * 3) {
    // 滾動到頂部,加載上一頁
    currentPage--; 
    fetchData(currentPage);
  }
  
  scrollTop = list.scrollTop;  // 更新滾動條位置
}); 
// 定義 fetchData() 方法,根據頁碼加載數據:
function fetchData(page) {
  // 發起請求,加載第page頁的數據
  ...
  
  // 將新加載的數據添加到列表尾部
  list.append(...); 
}
// 初始化獲取第一頁數據
fetchData(1)