通過IntersectionObserver實現(xiàn)圖片懶加載功能

首先來介紹一下IntersectionObserver,這個在MDN中有十分詳細的介紹.可以直接去看原文.這里簡單介紹一下他的用法.

IntersectionObserver

IntersectionObserver 是一個 JavaScript 的 API，用于觀察目標元素與其祖先元素或視窗（viewport）之間的交叉狀態(tài)。它能夠提供一種高效的方式來檢測目標元素是否進入或離開視窗，或者與其父元素發(fā)生交叉，從而實現(xiàn)懶加載、無限滾動、動態(tài)加載等功能。IntersectionObserver API 在現(xiàn)代瀏覽器中得到廣泛支持。

屬性：

• IntersectionObserver.root：表示根元素（root）的可見區(qū)域。它是一個 Document 對象的引用。默認情況下，根元素為視窗（viewport）。你可以指定一個特定的元素，使其成為觀察器的根元素。如果未指定，則默認為視窗。
• IntersectionObserver.rootMargin：用于擴展或縮小根元素的可見區(qū)域。它是一個字符串，類似于 CSS 的 margin 屬性，可以包含像素值或百分比值。例如，"10px 20px 30px 40px" 或者 "5% 10%"。這個屬性用于擴大或縮小根元素的可見區(qū)域，使得在進入或離開視窗之前，目標元素需要提前或推遲一定的距離。
• IntersectionObserver.thresholds：一個數(shù)組，表示觸發(fā) IntersectionObserver 回調(diào)的交叉閾值。交叉閾值是一個介于 0 和 1 之間的值，表示目標元素可見區(qū)域與根元素可見區(qū)域相交的百分比。當目標元素的可見區(qū)域與根元素的可見區(qū)域相交達到或超過閾值時，會觸發(fā)回調(diào)函數(shù)。默認情況下，閾值為 [0]，表示目標元素有任何部分進入可見區(qū)域時都會觸發(fā)回調(diào)。你可以自定義多個閾值，以實現(xiàn)更精確的觸發(fā)條件。

方法：

• IntersectionObserver.observe(target: Element)：將一個目標元素添加到 IntersectionObserver 中進行觀察。當目標元素的交叉狀態(tài)滿足設定的條件時，會觸發(fā) IntersectionObserver 的回調(diào)函數(shù)。
• IntersectionObserver.unobserve(target: Element)：停止對指定目標元素的觀察，即使目標元素的交叉狀態(tài)滿足條件，也不會觸發(fā) IntersectionObserver 的回調(diào)函數(shù)。
• IntersectionObserver.disconnect()：停止對所有目標元素的觀察，調(diào)用該方法后，即使目標元素的交叉狀態(tài)發(fā)生變化，也不會觸發(fā) IntersectionObserver 的回調(diào)函數(shù)。
• IntersectionObserver.takeRecords()：返回一個包含所有觀察目標元素的 IntersectionObserverEntry 對象數(shù)組。每個 IntersectionObserverEntry 對象包含目標元素的交叉狀態(tài)信息，如可見區(qū)域的大小和位置等。

簡單實現(xiàn)

圖片獲取:

// globEager是靜態(tài)加載模式
// glob是懶加載模式
// let imgList=import.meta.glob('./assets/*.*',{eager:true}) ----便是靜態(tài)加載模式
let imgList:Record<string,{default:string}>=import.meta.glob('./assets/*.*',{eager:true})
let arr=Object.values(imgList).map((item:any)=>item.default)
console.log(arr);

在很多時候,獲取圖片列表的方式都是將圖片路徑添加到一個數(shù)組中,進行獲取,十分繁瑣,而上面的這種方式相對而言要簡單很多.import.meta.glob和import.meta.globEager兩種方式大同小異,但是import.meta.glob這種可以直接實現(xiàn)圖片懶加載引入,而后面那種則是通過靜態(tài)資源的方式將圖片進行引入.這便是這兩種方式的區(qū)別.由于在這個dome中要實現(xiàn)圖片懶加載,所以是使用的是第二種方式引入(在第一種方式加一個{eager:true}便可以達到第二種引入方式的效果).

先來看看imgList的輸出結果:

可以很明顯的看到default就是圖片的路徑,那么只需要將其獲取即可

let arr=Object.values(imgList).map((item:any)=>item.default)

因為返回的是一個對象,所以便可以使用Object.values來獲取到value,再通過map遍歷的方式獲取到其default值

從而便獲得了其路徑,這種獲取路徑的方式還是比較輕松,且方便的.

再解決完圖片問題之后,便是懶加載部分的實現(xiàn)了.

懶加載實現(xiàn):

關于IntersectionObserver的屬性和方法在前面也簡單的介紹了.同時也附上了MDN相關鏈接.這里便不會再去贅述了.

相關代碼展示:

let vLazy:Directive<HTMLImageElement,string>=async (el,binging)=>{
  const def=await import('./assets/vue.svg')
  el.src=def.default
  console.log(el);
  const observer=new IntersectionObserver(enr=>{
    console.log(enr[0]);
    if(enr[0].intersectionRatio>0){
      setTimeout(()=>{
        el.src=binging.value
      },2000)
      observer.unobserve(el)
    }
  })
  observer.observe(el)
}

在對于前面屬性和方法的了解的加持下,看這段代碼屬實不難.其中定時器只是為了更好的去呈現(xiàn)懶加載的這個過程.

上述代碼中,通過使用vue的矢量圖來作為默認圖片,當未加載時,展示這張圖.看函數(shù)主體:

enr所返回的就是每一個圖片所返回的IntersectionObserver

因為只添加了三張圖片所以返回了三個對象,而所需要關注的就是intersectionRatio這個屬性,當它大于0時,便會將圖片路徑更換為指定路徑,從而實現(xiàn)了圖片懶加載,當然在實現(xiàn)這一功能之后,也要關閉 observer.unobserve(el),不然會一直關注這一個.

整體代碼呈現(xiàn):

<template>
<div >
  <div class="card">
    <img v-lazy="item" v-for="(item,index) in arr" :src="item" :key="index" alt="" width="360" height="500" >
  </div>
</div>
</template>
<script setup lang='ts'>
import HelloWorld from './components/HelloWorld.vue';
import type {Directive } from 'vue'
// globEager是靜態(tài)加載模式
// glob是懶加載模式
// let imgList=import.meta.glob('./assets/*.*',{eager:true}) ----便是靜態(tài)加載模式
let imgList:Record<string,{default:string}>=import.meta.glob('./assets/*.*',{eager:true})
let arr=Object.values(imgList).map((item:any)=>item.default)
console.log(arr);
let vLazy:Directive<HTMLImageElement,string>=async (el,binging)=>{
  const def=await import('./assets/vue.svg')
  el.src=def.default
  console.log(el);
  const observer=new IntersectionObserver(enr=>{
    console.log(enr[0]);
    if(enr[0].intersectionRatio>0){
      setTimeout(()=>{
        el.src=binging.value
      },2000)
      observer.unobserve(el)
    }
  })
  observer.observe(el)
}
</script>

到此這篇關于一文教你學會用JS實現(xiàn)圖片懶加載功能的文章就介紹到這了,更多相關JS實現(xiàn)圖片懶加載功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論