在vue3中手寫按需載入圖片

浮白呀發表於2024-09-10
Vue

在我們的網頁中.假如使用了大量的圖片,每個圖片都是需要去訪問載入的
這就影響了我們的訪問速度,手寫一個按需載入元件,就可以解決這個問題
讓圖片處於頁面檢視的時候再載入,減輕網頁訪問負擔

利用vue3官網給出的鉤子
我們常用的就是onMountent
如官網所示

為了及時監測,這裡使用vueUse來進行檢測檢視是否包含監控元件/標籤
el代表的是標籤本身,bing是代表了標籤的值,一般用binding.value表示
isIntersecting代表監控的元件是否出現在檢視中

app.directive('img-lazy',{
        mounted(el, binding) {
          // console.log(el);
         const {stop}=  useIntersectionObserver(
            el,
            ([{ isIntersecting }]) => {
              // console.log(isIntersecting);
              if(isIntersecting){
              // console.log(binding.value);
              console.log("el",el)
              el.src = binding.value
              stop()
              }
            },
          )
        },
      }

標籤用v-img-lazy表示,在使用過程檢視會反覆出現這個懶載入進而出現重載入問題,那麼我們引入vueuse內建的stop函式來進行預防,確保只執行一次
2.為了實現單一功能,我們另開一個檔案,在main.js中使用vue.use(匯入的該外掛)

新開一個directives/index.js

import { useIntersectionObserver } from '@vueuse/core'


export  const lazyLand = {
   install(app){
    app.directive('img-lazy',{
        mounted(el, binding) {
          // console.log(el);
         const {stop}=  useIntersectionObserver(
            el,
            ([{ isIntersecting }]) => {
              // console.log(isIntersecting);
              if(isIntersecting){
              // console.log(binding.value);
              console.log("el",el)
              el.src = binding.value
              stop()
              }
            },
          )
        },
      })
   }

}

相關文章