优化-图片懒加载

我们开发商城项目的时候,商品图片会有很多

如果在进入页面一下子就加载很多图片资源的话,会导致进入页面会很慢

我们今天说到的图片懒加载,是一个优化层面的

主要会有哪些优点呢?

比如:加载页面会快一些,包体积会小一些

网络层面的话就是减少了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')