高手教你懒加载

懒加载是什么?

懒加载是什么?懒加载就是在你用不到它的时候停止请求更新,提高性能。首先你要知道,在你打开一个大型电商类网站的时候,里面是不是很多图片啊?如果你一打开这个页面,所有图片一起加载,OMG是不是想想都很恐怖,所以我们需要懒加载来提高性能,现在实现懒加载是非常简单的。

懒加载的原理

就拿图片懒加载来说,其实就是图片进入可视区域的时候,才去加载对应的图片,否则不请求图片,这么一听是不是很简单呢。vueuse中有个很厉害的API:useIntersectionObserver，有了这个API自动监听图片是否进入可视区域这个最难的问题就解决了。原理如下:

// 实时监听这个dom是否在可视区内
// const { stop } = useIntersectionObserver(要监视的dom, ([{ isIntersecting }]) => {
//    // 回调函数: 当 isIntersecting 变化时：从可见->不可见； 不可见->可见
//    isIntersecting: 当前是否可见？
// })

// stop: 停止监听

整体代码如下:

// 自定义指令
import { useIntersectionObserver } from '@vueuse/core'
import { App } from 'vue'
import defaultImg from '@/assets/images/200.png'
export default {
  install(app: App) {
    // 全局指令
    app.directive('lazy', {
      // mounted是v3中自定义指令的生命周期，它会被自动调用
      // 它表示的涵义和组件的mounted是一致的
      // el 是dom元素， binding
      mounted(el,binding) {
        // console.log('lazy', el, binding.value)
        // 设置默认图
        el.src = defaultImg

        // console.log('lazy', el, binding.value)
        // 实时监听el是否可见，如果可见，给他的src设置binding.value
        const { stop } = useIntersectionObserver(el, ([{isIntersecting}]) => {
          if(isIntersecting) {
            el.src = binding.value

            // 停止
            stop()
          }
        })
        el.addEventListener('error', () => {
          // console.log('失败11111')
          // 设置默认图
          el.src = defaultImg
        })
      }
    })
  }
}

 把这个自定义指令在main.ts里面使用,然后就可以在全局使用了,如下图

 遇到想要懒加载的图片,使用v-lazy就可以使用啦,如下图