Vue实现图片懒加载

图片懒加载(Lazy Loading)是一种前端优化技术,旨在改善网页加载性能和用户体验。它的基本原理是,将网页中的图片延迟加载,只有当用户滚动到图片所在的位置时,才会加载图片内容,从而减少初始页面加载时的网络请求量,加快页面加载速度。

图片懒加载的优势包括:

  1. 减少初始加载时间: 只加载可视区域的图片,减少了初始页面加载所需的时间,提高了用户体验。

  2. 降低网络请求: 不需要一开始就加载所有图片,减少了不必要的网络请求,节省了带宽。

  3. 优化移动设备体验: 在移动设备上,网络速度可能较慢,图片懒加载可以显著提升页面加载速度。

  4. 节省资源: 不加载不可见区域的图片,减少了服务器和客户端的资源消耗。

Vue.js 可以通过使用第三方库或者自定义指令来实现图片的懒加载。

一.第三方库实现

首先,在你的 Vue 项目中安装 vue-lazyload

javascript 复制代码
npm install vue-lazyload --save

在 main.js 中引入和使用

这里是全局的引入,也可以按需引入

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload';
const app = createApp(App)
app.use(VueLazyload)
app.mount('#app')

在组件中使用懒加载

在需要懒加载的图片元素上使用 v-lazy 指令,将图片的 src 属性替换成 v-lazy

javascript 复制代码
<template>
  <div>
    <!-- 普通加载的图片 -->
    <img src="normal-image.jpg" alt="Normal Image" />

    <!-- 使用懒加载的图片 -->
    <img v-lazy="lazy-image.jpg" alt="Lazy Loaded Image" />
  </div>
</template>

<script>

</script>

二.自定义指令实现

首先安装VueUse

javascript 复制代码
npm i @vueuse/core

VueUse介绍

vueuse 是一个为 Vue.js 提供常用功能和自定义组合的库,旨在帮助开发者更轻松地构建 Vue 应用。它提供了一系列的 Composition API 组合函数,用于处理诸如状态管理、副作用、浏览器 API 等常见任务,以及一些自定义的功能。

以下是一些 vueuse 库提供的功能和特性:

  1. 常用 Composition API 函数: vueuse 提供了许多与 Composition API 相关的实用函数,如 useLocalStorage(用于在本地存储中保留状态)、useDebounce(用于防抖处理)、useIntersectionObserver(用于观察元素是否进入视口)、useEventListener(用于添加事件监听器)等等。

  2. 浏览器 API 包装: vueuse 还对浏览器原生 API 进行了封装,使它们更易于在 Vue 应用中使用,如 useMouse(获取鼠标位置)、useGeolocation(获取地理位置信息)、useIdle(检测用户是否处于空闲状态)等。

  3. 状态管理: 除了提供一些状态管理相关的功能外,vueuse 还包括了 useStore,这是一个基于 Composition API 的状态管理工具,可以在应用中更轻松地管理全局状态。

  4. 自定义组合: vueuse 鼓励开发者创建自己的自定义组合,这可以帮助你把常见的逻辑封装成可重用的组合函数,从而简化代码和提高代码的可维护性。

使用该库的 useIntersectionObserver函数,监听图片是否出现在可视区域

封装指令---directives/index.js

javascript 复制代码
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()  //当图片已经渲染出来后,停止监听
            }
          },
        )
      }
    })
  }
}
  1. 导入 useIntersectionObserver 这行代码导入了 @vueuse/core 库中的 useIntersectionObserver 函数,它是用来实现 Intersection Observer 的功能,可以用于观察元素是否进入视口。

  2. 定义 lazyPlugin 插件对象: 这个对象有一个 install 方法,用于在 Vue 应用中安装插件。

  3. app.directive('img-lazy', {...}) 这里使用 app.directive 方法来注册一个自定义指令 img-lazy。该指令将在具有 v-img-lazy 属性的图片元素上生效。

  4. mounted 钩子函数: 当绑定了 img-lazy 指令的图片元素被插入到 DOM 中时,mounted 钩子函数会被调用。在这个函数内部,你使用了 useIntersectionObserver 来监测图片元素是否进入视口。

  5. useIntersectionObserver 这个函数的参数包括要观察的元素 el,以及当元素状态变化时的回调函数。回调函数接收一个参数,包含当前的观察结果。在这里,你解构出 isIntersecting 变量,表示元素是否进入视口。

  6. if (isIntersecting) {...} 如果元素进入了视口,就会执行这个条件语句。在这里,你将图片元素的 src 属性设置为 binding.value,即绑定到指令的表达式的值,这通常是图片的 URL。然后调用 stop() 方法停止对元素的可见性变化进行观察。

全局注册

javascript 复制代码
// 全局指令注册
import {lazyPlugin } from '@/directives/index'
app.use(lazyPlugin)

指令使用

javascript 复制代码
 <img v-img-lazy="cate.picture"/>//cate.picture图片的url

三.效果

当图片未出现在可视区域时

图片出现在可视区域时

相关推荐
TimelessHaze29 分钟前
拆解字节面试题:async/await 到底是什么?底层实现 + 最佳实践全解析
前端·javascript·trae
执键行天涯1 小时前
从双重检查锁定的设计意图、锁的作用、第一次检查提升性能的原理三个角度,详细拆解单例模式的逻辑
java·前端·github
青青子衿越1 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
OpenTiny社区1 小时前
TinyEngine 2.8版本正式发布:AI能力、区块管理、Docker部署一键强化,迈向智能时代!
前端·vue.js·低代码
qfZYG1 小时前
Trae 编辑器在 Python 环境缺少 Pylance,怎么解决
前端·vue.js·编辑器
bug爱好者1 小时前
Vue3 基于Element Plus 的el-input,封装一个数字输入框组件
前端·javascript
Silence_xl2 小时前
RACSignal实现原理
前端
柯南二号2 小时前
【大前端】实现一个前端埋点SDK,并封装成NPM包
前端·arcgis·npm
dangkei2 小时前
【Wrangler(Cloudflare 的官方 CLI)和 npm/npx 的区别一次讲清】
前端·jvm·npm
乔公子搬砖2 小时前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定