vue3中的图片懒加载指令及全局注册

news2024/11/15 7:20:27

vue3中的图片懒加载指令及全局注册

最近重新刷了一遍黑马的小兔鲜前端项目,发现有个懒加载的指令之前还没有用过。而且写法相对固定,因此记录一下

首先,懒加载(Lazy Loading)的作用是延迟加载某些资源或组件,直到需要它们的时候再进行加载。这种技术通常用于优化性能和资源利用率,特别是在处理大量数据或复杂的应用程序中。通过懒加载,可以减少初始加载时间和资源消耗,提升用户体验,同时在需要时动态加载内容,避免不必要的加载和占用内存,通常用在处理前端图片时。

举个例子,我们在逛淘宝时,浏览某个页面时,不需要一下子就加载所有的商品图片,一是资源浪费,二是影响效率。通常是刷到哪,就什么时候加载资源,这里就用到了图片的懒加载。

一、安装使用vueUse

安装指令:

npm i @vueuse/core

找到监视页面视口的方法:

useIntersectionObserver

其作用是监视页面上某个元素当前是不是可见的

具体用法参见文档

二、编写指令方法

一般vue项目中的全局指令方法都写在src的directives文件夹下,创建index.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();
          }
        });
      },
    });
  },
};

三、全局注册懒加载指令

在项目入口文件main.js中注册指令

import { lazyPlugin } from '@/directives'

const app = createApp(App)
app.use(lazyPlugin)

四、组件中使用懒加载指令

<template>
  <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
      <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>
  </HomePanel>
</template>

img标签中的的v-img-lazy指令就是懒加载指令,这是vue项目的一般写法,在指令前添加v-即可

看看效果:

在这里插入图片描述

当页面刷到人气推荐时,加载了四张新的图片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1869871.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python生成图形验证码

文章目录 安装pillow基本用法生成代码 安装pillow pip install pillow 基本用法 特殊字体文字 如下所示&#xff0c;将下载下来的ttf字体文件放到py文件同一文件夹下 分享一个免费下载字体网站&#xff1a;http://www.webpagepublicity.com/free-fonts.html 我选的字体是Baj…

专题页面设计指南:从构思到实现

如何设计专题页&#xff1f;你有什么想法&#xff1f;专题页的设计主要以发扬产品优势为核心。一个好的专题页可以从不同的角度向用户介绍产品&#xff0c;扩大产品的相关优势&#xff0c;表达产品的优势&#xff0c;让用户在短时间内了解产品。因此&#xff0c;在设计详细信息…

纯css写一个动态圣诞老人

效果预览 在这篇文章中&#xff0c;我们将学习如何使用CSS来创建一个生动的圣诞老人动画。通过CSS的魔力&#xff0c;我们可以让圣诞老人在网页上摇摆&#xff0c;仿佛在向我们招手庆祝圣诞节和新年。 实现思路 实现这个效果的关键在于CSS的keyframes动画规则以及各种CSS属性…

Python 基础:用 json 模块存储和读取数据

目录 一、用 json 存储数据二、用 json 读取数据 遇到看不明白的地方&#xff0c;欢迎在评论中留言呐&#xff0c;一起讨论&#xff0c;一起进步&#xff01; 本文参考&#xff1a;《Python编程&#xff1a;从入门到实践&#xff08;第2版&#xff09;》 用户关闭程序时&#…

step6:改用单例模式

文章目录 文章介绍codemain.cppSerialPort.qmlSerialPortHandler.h 文章介绍 案例MF改为单例模式 参考之前写过的关于单例模式的文章单例模式1、单例模式2 code main.cpp qmlRegisterSingletonType(“com.example.serialport”, 1, 0, “SerialPortHandler”, SerialPortHan…

【Python】易错题 [1]

目录 一、选择&#xff1a; 1.列表的复制​编辑 2.函数 二、填空 一、选择&#xff1a; 1.列表的复制 在Python中&#xff0c;列表是可变的数据类型。当将一个列表赋值给另一个变量时&#xff0c;实际上是将这个变量的引用指向原始列表。&#xff08;指针&#xff09;因此&…

软件系统测试包括哪些测试内容?有什么作用?

在软件开发的过程中&#xff0c;软件系统测试是不可或缺的环节。它是为了验证并评估软件系统的功能、性能以及其它需要满足的特性。那么&#xff0c;软件系统测试包括哪些测试呢?又有什么作用? 软件系统测试是通过执行一系列策略和技术&#xff0c;检测软件系统是否满足用户…

docker 部署jitsi meet

1. 部署环境&#xff1a; 1.1 vm 虚拟机 安装的 centos 7 1.2 centos7安装docker 和 docker-compose 2.docker命令 官网部署文档地址&#xff1a;&#xff08;文档地址有可能失效&#xff09; Self-Hosting Guide - Docker | Jitsi Meet 2.1Download and extract the late…

AL8807是一款降压型DC/DC转换器,旨在以恒定电流驱动LED,可串联驱动多达9个LED,从6V至36V的电压源

一般描述 AL8807是一款降压型DC/DC转换器&#xff0c;旨在以恒定电流驱动LED。根据LED的正向电压&#xff0c;该设备可串联驱动多达9个LED&#xff0c;从6V至36V的电压源。LED的串联连接提供相同的LED电流&#xff0c;从而实现均匀的亮度&#xff0c;并消除了对镇流电阻…

4大wordpress渐变色网站模板

家居摆件wordpress外贸模板 家居装饰、配件、摆件wordpress外贸模板&#xff0c;适合搞家居装饰的公司官网使用。 https://www.jianzhanpress.com/?p3515 玩具wordpress外贸模板 简洁玩具wordpress外贸模板&#xff0c;适合做跨境电商外贸公司使用的wordpres外贸s网站主题。…

Android U Settings 应用中 APN 菜单实现的代码逻辑

功能简介 MobileNetwork移动网络设置页面下有【接入点设置】(APN)。 问题:为什么Controller初始化找不到pref,然后报错。 Note:什么时候切换成Controller的呢?在Android T&U 上还没有更新成kt实现 ,但是已经有Controller的方案。 流程逻辑 1、界面“telephony_a…

frida的安装使用以及解决抓包app时遇到的证书校验

frida的安装和使用 这里使用夜神模拟器来演示frida的使用&#xff0c;因为真机开启frida-server服务时需要root权限,模拟器自带root 下载夜神模拟器并启动 夜神官网 打开power shell&#xff0c; adb连接模拟器&#xff0c;查看模拟器的系统型号 adb connect 127.0.0.1:6200…

MySQL学习(3):SQL语句之数据定义语言:DDL

1.SQL通用语法与分类 &#xff08;1&#xff09;通用语法 &#xff08;2&#xff09;分类 2.DDL 2.1数据库操作 show DATABASES; #查询所有数据库select DATABASE(); #查询当前数据库create DATABASE 数据库名称 [default charest 字符集] [collate 排列规则]; #default cha…

VC++学习(6)——菜单编程,消息捕获机制和顺序;创建标记、缺省、图形、不可用等菜单;命令更新模式;右键的弹出菜单

目录 引出第6讲 菜单编程在CMainFrame中捕获消息响应捕获顺序插曲&#xff1a;删除函数的方法 消息分类菜单的结构创建标记菜单创建缺省菜单创建图形菜单菜单项不允许使用如何整个菜单取消命令更新模式右键弹出菜单功能添加方式显示位置定义事件 动态添加定义响应 总结第五讲 文…

DELL:利用大语言模型(LLM)生成评论与解释,革新虚假信息检测

ACL 2024 DELL: Generating Reactions and Explanations for LLM-Based Misinformation Detection https://arxiv.org/abs/2402.10426https://arxiv.org/abs/2402.10426 1.概述 大型语言模型(LLM)虽在诸多领域显示出色性能,但在直接应用于新闻真实性鉴别时,面临两大核心挑…

【React】变量 useState

开发需要&#xff0c;随便学学react。上手第一天&#xff0c;感觉这个JS语法很怪&#xff0c;没有什么逻辑性&#xff0c;比较抽象。随便写写笔记。 跟着网上找的项目写写感觉这个项目还不错&#xff1a; 分享给码友 https://zh-hans.react.dev/learn/tutorial-tic-tac-toe 参…

未来一周比特币价格及数字货币市场预测

荷月的比特币市场就像过山车一样&#xff0c;仅仅六月下旬就跌去-12%&#xff0c;本周更是暴跌-6%&#xff0c;至 58,378美元。在这种市场表现&#xff0c;应有的踩踏如期而至。德国政府今日宣布再出售750 比特币的行为继续打击多头&#xff0c;但是小编认为这恰恰预示着市场可…

【Flink metric(1)】Flink指标系统的系统性知识:获取metric以及注册自己的metric

文章目录 一. Registering metrics&#xff1a;向flink注册新自己的metrics1. 注册metrics2. Metric types:指标类型2.1. Counter2.2. Gauge2.3. Histogram(ing)2.4. Meter 二. Scope:指标作用域1. User Scope2. System Scope ing3. User Variables 三. Reporter ing四. System…

海南聚广众达电子商务咨询有限公司抖音开店靠谱吗?

在当今数字化时代&#xff0c;电商行业迅猛发展&#xff0c;抖音作为短视频平台的佼佼者&#xff0c;其电商功能也日益凸显出其巨大的商业价值。海南聚广众达电子商务咨询有限公司&#xff0c;凭借其专业的电商服务能力和对抖音平台的深入理解&#xff0c;成为众多品牌进军抖音…

AI新热点:边云协同:大模型结合小模型(大小模型联合推理)

背景 AI模型规模不断剧增已是不争的事实。模型参数增长至百亿、千亿、万亿甚至十万亿&#xff0c;大模型在算力推动下演变为人工智能领域一场新的“军备竞赛”。 这种竞赛很大程度推动了人工智能的发展&#xff0c;但随之而来的能耗和端侧部署问题限制了大模型应用落地。2022…