美文网首页vue
vue3图片懒加载

vue3图片懒加载

作者: 王果果 | 来源:发表于2021-07-29 22:03 被阅读0次

    图片懒加载

    • src/direcitves/index.js
    • 在main.js中引入该文件import directivePlugin from '@/direcitves'
    • 在main.js中去全局注册插件createApp(App)..use(directivePlugin).mount('#app')
    • 使用:已经全局注册,直接在img标签上加v-img-lazy="图片路径" ,并把img标签本身的src属性删除
    • 在导入的defaultImg 后导入默认图片的路径
    import { useIntersectionObserver } from '@vueuse/core'
    import defaultImg from '@/assets/images/200.png'  //默认加载图片
    const plugin = {
      install (app) {
        console.log('指令插件', app)
        // app.directive() todo
        // 编写图片懒加载指令逻辑
        app.directive('img-lazy', {
          mounted (el, binding) {
            // el:指令绑定的dom元素
            // binding: value  指令绑定的表达式的值
            console.log(el, binding.value)
            // 懒加载的逻辑:监听当前的img dom对象是否进入到视口区域  如果进入 就把图片的地址交给img 的src属性
            // 一旦src有了值就会自动发送http请求 获取图片资源
            const { stop } = useIntersectionObserver(
              el,
              ([{ isIntersecting }], observerElement) => {
                // isIntersecting: 当前监听的元素是否成功进入到视口区域如果进来了就是true 否则就是false
                // 有了一个判断是否进入视口区域的条件 如果为true就发送请求
                if (isIntersecting) {
                  // 错误处理
                  el.onerror = function () {
                    // 使用默认图片交给src
                    el.src = defaultImg
                  }
                  el.src = binding.value
                  stop()
                }
                // 监听处理不是只进行一次的 每次进入移出视口都会再次执行回调
              },
              // 0 - 1 数值越大代表 要求进入的面积越大才能触发回调函数
              { threshold: 0 }
            )
          }
        })
      }
    }
    
    export default plugin
    

    相关文章

      网友评论

        本文标题:vue3图片懒加载

        本文链接:https://www.haomeiwen.com/subject/squvmltx.html