前置知識

Intersection Observer

瀏覽器提供api，用于檢測目標(biāo)元素和祖先元素/頂級文檔視窗 (viewport) 交叉狀態(tài)的方法。

    const observer = new IntersectionObserver(function (IntersectionObserverEntry) {},options);
    observer.observe(el);

構(gòu)造函數(shù)接收一個回調(diào)函數(shù)，一個配置對象（可選），返回一個觀察器實例。實例的observe方法接收一個dom節(jié)點作為觀察的對象
當(dāng)目標(biāo)對象出現(xiàn)在視口的時候，會調(diào)用回調(diào)函數(shù)，傳遞一個元素都為IntersectionObserverEntry對象的數(shù)組。

IntersectionObserverEntry對象有以下屬性 (只列舉了這篇用到的兩個）：

• target：被觀察的目標(biāo)元素，是一個 DOM 節(jié)點對象
• intersectionRatio：目標(biāo)元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時為1，完全不可見時小于等于0

Vue3指令周期

• created：在綁定元素的 attribute 或事件監(jiān)聽器被應(yīng)用之前調(diào)用；
• beforeMount：當(dāng)指令第一次綁定到元素并且在掛載父組件之前調(diào)用；
• mounted：在綁定元素的父組件被掛載后調(diào)用；
• beforeUpdate：在更新包含組件的 VNode 之前調(diào)用；
• updated：在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用；
• beforeUnmount：在卸載綁定元素的父組件之前調(diào)用；
• unmounted：當(dāng)指令與元素解除綁定且父組件已卸載時，只調(diào)用一次；

image對象

Image 對象代表嵌入的圖像。

• onload 當(dāng)圖像裝載完畢時調(diào)用的回調(diào)函數(shù)。

思路

想要的效果 在有多個圖片加載的時候 只要在最外面的wrapper上用一次v-lazy就可以

每張圖片的src先用加載gif替換掉，然后再放到文檔碎片里面，等到用戶滑動到視口了再掛載上圖片元素，之前一直使用加載的gif占位，等圖片加載完成再替換。

 首先vue3的指令跟組件類似也有生命周期，created的時候指令綁定的dom元素還沒有attribute，也沒有DOM結(jié)構(gòu)，所以不適合，mounted整個DOM元素已經(jīng)掛載到頁面上了，圖片在掛載上去的時候就開始加載，再做懶加載已經(jīng)沒有意義了，所以使用beforeMount，有完整的DOM結(jié)構(gòu)，但是沒有掛載到頁面上。

完整代碼

export const lazyLoad = {
  beforeMount(el: any, binding: any, vnode: any, prevVnode: any) {
    const img = el.querySelector(`.${el.className} img`);
    const src = img.getAttribute("src");
    // 圖片使用loading gif替換
    img.setAttribute("src", "https://m.tea7.com/images/imgLoading.gif");
    // 新建Image對象
    const tempImg = new Image();
    tempImg.onload = function () {
      img.setAttribute("src", src);
    };
    const parent = img.parentNode;
    const observer = new IntersectionObserver(function (changes) {
      // 可視
      changes.forEach((item) => {
        if (item.intersectionRatio !== 0) {
          tempImg.src = src;
        }
      });
    });
    observer.observe(el);
  },
};

參考鏈接：

IntersectionObserver API 使用教程

總結(jié)

到此這篇關(guān)于vue3組合式api實現(xiàn)v-lazy圖片懶加載的文章就介紹到這了,更多相關(guān)vue3實現(xiàn)v-lazy圖片懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論