告别页面卡顿：vue-lazyload自定义指令与组件开发指南

冯梦姬Eddie

738人浏览 · 2025-09-29 06:17:23

冯梦姬Eddie · 2025-09-29 06:17:23 发布

告别页面卡顿：vue-lazyload自定义指令与组件开发指南

【免费下载链接】vue-lazyload A Vue.js plugin for lazyload your Image or Component in your application. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-lazyload

你是否还在为Vue应用中图片和组件加载导致的页面卡顿烦恼？本文将带你深入了解vue-lazyload的扩展开发，通过自定义指令与组件实现，轻松解决资源加载性能问题。读完本文，你将掌握如何定制懒加载行为、优化用户体验，并能根据实际需求开发符合项目场景的懒加载方案。

项目概述

vue-lazyload是一个专为Vue.js应用设计的懒加载插件，能够延迟加载图片或组件，有效提升页面加载速度和用户体验。项目核心文件结构如下：

入口文件：src/index.js - 插件安装与初始化
核心逻辑：src/lazy.js - 懒加载管理器实现
组件实现：
- src/lazy-image.js - 图片懒加载组件
- src/lazy-component.js - 组件懒加载实现

自定义指令开发

指令注册原理

vue-lazyload通过Vue.directive注册了v-lazy指令，核心实现位于src/index.js。指令支持Vue 2和Vue 3版本，通过判断Vue版本号提供不同的实现：

// Vue 2实现
Vue.directive('lazy', {
  bind: lazy.add.bind(lazy),
  update: lazy.update.bind(lazy),
  componentUpdated: lazy.lazyLoadHandler.bind(lazy),
  unbind: lazy.remove.bind(lazy)
})

// Vue 3实现
Vue.directive('lazy', {
  bind: lazy.lazyLoadHandler.bind(lazy),
  update (newValue, oldValue) {
    assign(this.vm.$refs, this.vm.$els)
    lazy.add(this.el, {
      modifiers: this.modifiers || {},
      arg: this.arg,
      value: newValue,
      oldValue: oldValue
    }, {
      context: this.vm
    })
  },
  unbind () {
    lazy.remove(this.el)
  }
})

自定义指令扩展

要扩展v-lazy指令功能，可以通过修改src/lazy.js中的Lazy类实现。例如，添加自定义加载状态处理：

// 在Lazy类的_initEvent方法中扩展事件
this.$on('custom-load', (listener) => {
  // 自定义加载逻辑
  console.log('Custom load event for', listener.src);
});

懒加载组件开发

图片懒加载组件

src/lazy-image.js实现了lazy-image组件，核心逻辑如下：

组件通过checkInView方法检测元素是否进入视口
使用loadImageAsync加载图片资源
处理加载状态（loading/loaded/error）

// 核心加载方法
load (onFinish = noop) {
  if ((this.state.attempt > this.options.attempt - 1) && this.state.error) {
    if (!lazyManager.options.silent) console.log(`VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times`)
    onFinish()
    return
  }
  const src = this.options.src
  loadImageAsync({ src }, ({ src }) => {
    this.renderSrc = src
    this.state.loaded = true
  }, e => {
    this.state.attempt++
    this.renderSrc = this.options.error
    this.state.error = true
  })
}

自定义组件懒加载

src/lazy-component.js提供了组件懒加载功能，通过控制组件的显示时机实现懒加载：

// 简化的组件实现
export default {
  data () {
    return {
      show: false // 控制组件是否渲染
    }
  },
  methods: {
    checkInView () {
      // 检测元素是否在视口中
      this.getRect()
      return inBrowser &&
                (this.rect.top < window.innerHeight * lazy.options.preLoad && this.rect.bottom > 0) &&
                (this.rect.left < window.innerWidth * lazy.options.preLoad && this.rect.right > 0)
    },
    load () {
      this.show = true // 显示组件
      this.state.loaded = true
      this.$emit('show', this)
    }
  }
}

高级应用场景

自定义加载状态

通过修改src/lazy.js中的_elRenderer方法，可以自定义不同加载状态的表现形式：

_elRenderer (listener, state, cache) {
  // 自定义状态渲染逻辑
  const { el } = listener
  let src
  
  switch (state) {
    case 'loading':
      src = listener.loading
      el.classList.add('lazy-loading')
      break
    case 'error':
      src = listener.error
      el.classList.add('lazy-error')
      break
    default:
      src = listener.src
      el.classList.add('lazy-loaded')
      break
  }
  
  // 设置src属性或背景图
  if (listener.bindType) {
    el.style[listener.bindType] = `url("${src}")`
  } else {
    el.setAttribute('src', src)
  }
}

自定义触发条件

修改src/lazy.js中的checkInView方法，可以自定义元素进入视口的判断条件：

// 在ReactiveListener的checkInView方法中
checkInView () {
  this.getRect()
  
  // 自定义判断逻辑：元素顶部距离视口底部100px时触发加载
  return (
    this.rect.top <= window.innerHeight + 100 &&
    this.rect.bottom >= 0 &&
    this.rect.left <= window.innerWidth &&
    this.rect.right >= 0
  )
}