通过自定义指令实现图片懒加载

前提:使用到了VueUse插件。

先创建自定义插件文件夹

javascript 复制代码
// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core' // 这个是VueUse里的一个方法

export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑  定义全局指令
    app.directive('img-lazy', {
      mounted(el,binding) {
        // el: 指令绑定的元素 在这里指img元素
        // binding:binding.value 指令等于号后面绑定的表达式的值 这里指图片url
        // useIntersectionObserver方法是判断目标元素是否进入视口区域
        // 解构出stop方法,手动停止监听防止内存浪费
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 进入视口区
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}

在需要实现图片懒加载区域添加上自定义指令

html 复制代码
<img v-img-lazy="item.picture" alt="">

在main.js中引入注册

javascript 复制代码
// 引入懒加载指令插件并注册
import { lazyPlugin } from './directives'
const app = createApp(App)
app.use(lazyPlugin)

注意点就是:useIntersectionObserver对于元素的监听是一直存在的,除非手动停止监听,所以stop方法的目的就是:在监听的图片第一次完成加载之后就停止监听

相关推荐
半点寒12W2 分钟前
uniapp全局状态管理实现方案
前端
Vertira3 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL37 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949701 小时前
Vue响应式原理推导过程
vue.js·响应式设计
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端
巴别塔的饿灵1 小时前
Webpack[TBC]
前端