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

前提:使用到了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方法的目的就是:在监听的图片第一次完成加载之后就停止监听

相关推荐
天宇&嘘月1 小时前
web第三次作业
前端·javascript·css
小王不会写code2 小时前
axios
前端·javascript·axios
发呆的薇薇°3 小时前
vue3 配置@根路径
前端·vue.js
luoluoal3 小时前
基于Spring Boot+Vue的宠物服务管理系统(源码+文档)
vue.js·spring boot·宠物
luckyext3 小时前
HBuilderX中,VUE生成随机数字,vue调用随机数函数
前端·javascript·vue.js·微信小程序·小程序
小小码农(找工作版)3 小时前
JavaScript 前端面试 4(作用域链、this)
前端·javascript·面试
前端没钱4 小时前
前端需要学习 Docker 吗?
前端·学习·docker
前端郭德纲4 小时前
前端自动化部署的极简方案
运维·前端·自动化
海绵宝宝_4 小时前
【HarmonyOS NEXT】获取正式应用签名证书的签名信息
android·前端·华为·harmonyos·鸿蒙·鸿蒙应用开发
码农土豆5 小时前
chrome V3插件开发,调用 chrome.action.setIcon,提示路径找不到
前端·chrome