Vue Hook 封裝圖片懶加載通用業(yè)務(wù)

一、什么是圖片懶加載

圖片懶加載（Lazy Loading）是一種在用戶需要的時候（通常是滾動到可視區(qū)域）才加載圖片的技術(shù)。通過這種方式，可以減少頁面的初始加載時間，減少帶寬消耗，提高用戶體驗。

二、Vue中使用Intersection Observer實現(xiàn)圖片懶加載

Intersection Observer 是一個現(xiàn)代瀏覽器提供的API，用于異步觀察目標(biāo)元素與其祖先元素或視窗（viewport）交叉狀態(tài)的變化。我們可以利用這個API來實現(xiàn)圖片的懶加載。

三、封裝一個通用的圖片懶加載 Hook

首先，我們創(chuàng)建一個自定義的 Vue Hook，用于實現(xiàn)圖片懶加載功能。

1. 創(chuàng)建 `useLazyLoad` Hook

在 src/hooks 目錄下創(chuàng)建一個 useLazyLoad.js 文件：

import { ref, onMounted, onUnmounted } from 'vue';

export function useLazyLoad(imageSelector) {
  const images = ref([]);

  const loadImage = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  };

  const observer = new IntersectionObserver(loadImage, {
    root: null,
    rootMargin: '0px',
    threshold: 0.1,
  });

  onMounted(() => {
    images.value = document.querySelectorAll(imageSelector);
    images.value.forEach(img => {
      observer.observe(img);
    });
  });

  onUnmounted(() => {
    if (images.value.length) {
      images.value.forEach(img => {
        observer.unobserve(img);
      });
    }
  });

  return {
    images,
  };
}

2. 使用 `useLazyLoad` Hook

組件中使用這個 Hook 來實現(xiàn)圖片懶加載。

export default {
setup() {
const imageList = ref([
{ src: 'https://via.placeholder.com/600x400?text=Image+1' },
{ src: 'https://via.placeholder.com/600x400?text=Image+2' },
{ src: 'https://via.placeholder.com/600x400?text=Image+3' },
// 更多圖片...
]);

useLazyLoad('.lazy-load');

return {
imageList,
};
},
};
</script>

.lazy-load[src] {
opacity: 1;
}
</style>

四、解釋代碼

定義 useLazyLoad Hook：
- 使用 Vue 的 ref、onMounted 和 onUnmounted 組合 API。
- loadImage 函數(shù)處理圖片的實際加載：當(dāng)圖片進入視窗時，設(shè)置圖片的 src 屬性，并停止觀察該圖片。
- 使用 IntersectionObserver API 觀察圖片元素的可見性變化。
在組件中使用 Hook：
- 使用 ref 定義一個圖片列表。
- 調(diào)用 useLazyLoad 并傳遞圖片的選擇器（.lazy-load）。
- 在模板中，使用 v-for 指令渲染圖片列表，并使用 data-src 屬性存儲圖片 URL，等待懶加載。

posted @ 2024-08-01 20:04 最小生成樹閱讀(196) 評論(2) 收藏舉報

刷新頁面返回頂部

zx618

Vue Hook 封裝圖片懶加載通用業(yè)務(wù)

一、什么是圖片懶加載

二、Vue中使用Intersection Observer實現(xiàn)圖片懶加載

三、封裝一個通用的圖片懶加載 Hook

1. 創(chuàng)建 `useLazyLoad` Hook

2. 使用 `useLazyLoad` Hook

四、解釋代碼

公告

zx618

Vue Hook 封裝圖片懶加載通用業(yè)務(wù)

一、什么是圖片懶加載

二、Vue中使用Intersection Observer實現(xiàn)圖片懶加載

三、封裝一個通用的圖片懶加載 Hook

1. 創(chuàng)建 useLazyLoad Hook

2. 使用 useLazyLoad Hook

四、解釋代碼

公告

1. 創(chuàng)建 `useLazyLoad` Hook

2. 使用 `useLazyLoad` Hook