【Vue】图片懒加载的实现

封装全局指令img-lazy

js 复制代码
// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install (app) {
    // 懒加载指令逻辑
    app.directive('img-lazy', {
      mounted (el, binding) {
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        console.log(el, binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            if (isIntersecting) {
              // 进入视口区域
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}

注册全局指令

js 复制代码
// 全局指令注册
import {lazyPlugin} from "@/directives";
app.use(lazyPlugin)

重构HomeHot.vue,从而实现懒加载效果,提高页面加载性能

html 复制代码
  <ul class="goods-list">
    <li v-for="item in hotList" :key="item.id">
      <RouterLink to="/">
        <img v-img-lazy="item.picture" alt="">
        <p class="name">{{ item.title }}</p>
        <p class="desc">{{ item.alt }}</p>
      </RouterLink>
    </li>
  </ul>

有一点需要说明:IntersectionObserver是异步库,这样即使目标元素一开始就在视口中,回调函数的执行也会在解构赋值之后,这样能够确保stop方法在回调函数中调用时已经被正确解构。

相关推荐
Bunury1 分钟前
element-plus添加暗黑模式
开发语言·前端·javascript
心走6 分钟前
八股文中TCP三次握手怎么具象理解?
前端·面试
Aiolimp15 分钟前
React常见Hooks使用(二)
前端·react.js
By北阳15 分钟前
CSS 中实现 div 居中有以下几种常用方法
前端·css
在广东捡破烂的吴彦祖17 分钟前
window配置Flutter开发环境
前端·flutter
辣椒粉丝20 分钟前
记rspack想提issuse,提太慢白嫖不上了
前端·javascript
腰间盘突出的红利22 分钟前
npm组件库搭建
前端
火星思想22 分钟前
前端基础布局写法详解:左右、左中右及弹性布局实践
前端·css
小桥风满袖22 分钟前
Three.js-硬要自学系列10 (创建纹理贴图、自定义顶点UV坐标)
前端·css·three.js
七月丶25 分钟前
🧼 为什么我开始在项目里禁用 CSS 文件?
前端·javascript·后端