快捷導(dǎo)航

vue3組合式api實(shí)現(xiàn)v-lazy圖片懶加載的方法實(shí)例

更新時(shí)間：2022年09月27日 11:39:07 作者：困頓小狗

vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue3組合式api實(shí)現(xiàn)v-lazy圖片懶加載的相關(guān)資料,需要的朋友可以參考下

前置知識(shí)

Intersection Observer

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

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

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

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

target：被觀察的目標(biāo)元素，是一個(gè) DOM 節(jié)點(diǎn)對象
intersectionRatio：目標(biāo)元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時(shí)為1，完全不可見時(shí)小于等于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)指令與元素解除綁定且父組件已卸載時(shí)，只調(diào)用一次；

image對象

Image 對象代表嵌入的圖像。

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

思路

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

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

首先vue3的指令跟組件類似也有生命周期，created的時(shí)候指令綁定的dom元素還沒有attribute，也沒有DOM結(jié)構(gòu)，所以不適合，mounted整個(gè)DOM元素已經(jīng)掛載到頁面上了，圖片在掛載上去的時(shí)候就開始加載，再做懶加載已經(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實(shí)現(xiàn)v-lazy圖片懶加載的文章就介紹到這了,更多相關(guān)vue3實(shí)現(xiàn)v-lazy圖片懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: