優化-圖檔懶加載

我們開發商城項目的時候,商品圖檔會有很多

如果在進入頁面一下子就加載很多圖檔資源的話,會導緻進入頁面會很慢

我們今天說到的圖檔懶加載,是一個優化層面的

主要會有哪些優點呢?

比如:加載頁面會快一些,包體積會小一些

網絡層面的話就是減少了http請求

我們都知道,在浏覽器打開的瞬間,同一時間最多并行6-8個請求

import defaltImg from '@/assets/images/200.png'
// 引入監聽是否進入視口
import { useIntersectionObserver } from '@vueuse/core'

export default{
  install(app){
  // 自定義指令
    app.directive('imglazy',{
      mounted(el,binding){
        // el:  dom對象
        // binding:binding.value可以拿到圖檔的url位址
        const { stop } = useIntersectionObserver(
          //監聽目标元素
          el,
          ([{ isIntersecting }], observerElement) => {
            if(isIntersecting){
              // 當圖檔加載失敗的時候就用預設的圖檔代替
              el.onerror=()=>{
                el.src = defaltImg
              }
              el.src = binding.value
              stop()
            }
          },
          // 剛進入視口區域就立刻執行回調 0 - 1 
          { threshold: 0 }
        )
      }
    })
  }
}
           

import defineDirective from '@/directives'
createApp(App).use(store).use(router).use(componentPlugin).use(directivePlugin).mount('#app')