当前位置: 首页 > news >正文

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

前提:使用到了VueUse插件。
先创建自定义插件文件夹

// 定义懒加载插件
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.valuestop()}},)}})}
}

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

<img v-img-lazy="item.picture" alt="">

在main.js中引入注册

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

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

相关文章:

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

前提&#xff1a;使用到了VueUse插件。 先创建自定义插件文件夹 // 定义懒加载插件 import { useIntersectionObserver } from vueuse/core // 这个是VueUse里的一个方法export const lazyPlugin {install(app) {// 懒加载指令逻辑 定义全局指令app.directive(img-lazy, {mo…...

QT项目-仿QQ聊天(带宠物系统)

目录 一&#xff0c;项目介绍 二&#xff0c;开发环境 三&#xff0c;涉及技术 四&#xff0c;项目效果示例图 1&#xff0c;登录界面 2&#xff0c;主界面 3&#xff0c;聊天界面 4&#xff0c;功能界面 5&#xff0c;宠物界面 一&#xff0c;项目介绍 这是一个基于u…...

前端算法题:3216. 交换后字典序最小的字符串(力扣每日一题)

今日题目为&#xff1a;3216. 交换后字典序最小的字符串 题目详情&#xff1a; 给你一个仅由数字组成的字符串 s&#xff0c;在最多交换一次 相邻 且具有相同 奇偶性 的数字后&#xff0c;返回可以得到的字典序最小的字符串。 如果两个数字都是奇数或都是偶数&#xff0c;则…...

29.1 时序监控和日志监控的对比,分析日志监控的核心诉求

本节重点介绍 : 监控系统分类时序监控和日志监控的对比轻量日志监控系统的诉求 监控系统分类 监控系统按照原理和作用大致可以分为三类 日志类&#xff08;Log&#xff09;调用链类&#xff08;Tracing&#xff09;度量类&#xff08;Metrics&#xff09; 日志类&#xff08…...

git仓库分支

操作 切换分支 git checkout 1.2.5 git checkout 1.3.0 使用命令切换分支之后&#xff0c;代码内容加载过后也是切换好的...

多模态机器学习在精准健康中的应用--九五小庞

这篇综述文章探讨了将多模态数据融合应用于医疗诊断和预后预测的最新研究进展。 本文作者们确定了三个主要的研究问题&#xff1a;多模态数据融合在健康领域的文献特征是什么&#xff1f;用于分析多模态健康数据的不同分析技术、方法和策略是什么&#xff1f;不同类型的异构数…...

提升网站速度与性能优化的有效策略与实践

内容概要 在数字化快速发展的今天&#xff0c;网站速度与性能优化显得尤为重要&#xff0c;它直接影响用户的浏览体验。用户在访问网站时&#xff0c;往往希望能够迅速获取信息&#xff0c;若加载时间过长&#xff0c;轻易可能导致他们转向其他更为流畅的网站。因此&#xff0…...

MySQL索引从基础到原理,看这一篇就够了

https://developer.aliyun.com/article/841106 https://zhuanlan.zhihu.com/p/29118331 索引创建使用总结 因为索引对于改善查询性能的作用是巨大的&#xff0c;所以我们的目标是尽量使用索引。 1. 索引的创建 • 1、在用于 where 判断 order 排序和 join 的(on)字段上创…...

普通高考预报名上传蓝底证件照手机自拍方法详解

普通高考预报名过程中&#xff0c;上传一张合规的蓝底证件照是必不可少的一步。本文将详细介绍如何使用手机自拍并使用工具来制作符合要求的蓝底证件照。注意&#xff0c;目前仅有广东等个别省份允许特定类型考生使用自拍照上传&#xff08;例如普高预报名阶段、学考报名&#…...

Webserver(2.3)exec函数族

目录 exec函数族介绍execl函数execlp函数 exec函数族介绍 c语言中没有重载&#xff0c;因为不允许同名函数 一系列功能相似的函数称为函数族 exec函数族的作用是根据指定的文件名找到可执行文件&#xff0c;并用它来取代调用进程的内容。 程序在运行的时候&#xff0c;fork一…...

LeetCode Hot100 - 子串篇

前言 挑战一个月刷完力扣的hot100&#xff0c;记录一下每题的思路~ 这次是子串相关的题目 &#xff08;1&#xff09;560. 和为 K 的子数组 ①暴力枚举&#xff0c;使用一个变量sum记录以l开头r结尾的情况 class Solution {public int subarraySum(int[] nums, int k) {int r…...

【Android】Convenient ADB Commands

Install adb install -r <path>Uninstall adb uninstall <pkg>Start adb shell am start -n <pkg>/.SplashActivityStop adb shell am force-stop <pkg>Reset adb shell pm clear <pkg>Reboot adb rebootShutdown adb reboot -p...

elementUI 时间控件控制时间选择

选择时间大于当前月或小于2024年一月禁止选择 <el-form-item label"成交月份:" label-width"105px" ><div class"block"><el-date-pickerv-model"formData.deal_month"type"month":picker-options"pick…...

什么是x86架构,什么是arm架构

什么是 x86 架构&#xff1f; x86 架构是一种经典的指令集架构&#xff08;ISA&#xff09;&#xff0c;最早由英特尔在 1978 年推出&#xff0c;主要用于 PC、服务器等领域。 它是一种复杂指令集计算&#xff08;CISC&#xff09;架构&#xff0c;支持大量的复杂指令和操作&…...

c语言水仙花,超简单讲解

效果 3或者大于3位数 每一位的位数次方相加等于 自身 例如 153 13 53 33 结果为112527 153 1634&#xff1a; 计算过程&#xff1a; 14643444112968125616341^4 6^4 3^4 4^4 1 1296 81 256 16341464344411296812561634 过程 求得单独将所有位数的正数拎出来…...

Flutter 13 网络层框架架构设计,支持dio等框架。

在移动APP开发过程中&#xff0c;进行数据交互时&#xff0c;大多数情况下必须通过网络请求来实现。客户端与服务端常用的数据交互是通过HTTP请求完成。面对繁琐业务网络层&#xff0c;我们该如何通过网络层架构设计来有效解决这些问题&#xff0c;这便是网络层框架架构设计的初…...

Python小白学习教程从入门到入坑------第二十课 闭包修饰器(语法基础)

一、递归函数 1.1 基本信息 递归函数是指一个函数在其定义中直接或间接地调用了自身 递归在解决许多问题&#xff08;如树的遍历、图的搜索、数学中的分治算法等&#xff09;时非常有用 在Python中&#xff0c;递归函数可以通过简单的语法来实现 然而&#xff0c;使用递归…...

Vue+element-ui实现网页右侧快捷导航栏 Vue实现全局右侧快捷菜单功能组件

Vue+element-ui实现网页右侧快捷导航栏 Vue实现全局右侧快捷菜单功能组件 可视区域没超过当前屏幕高度时候只显示三个菜单效果 可视区域超过当前屏幕高度时,显示可回到顶部菜单的,当然这个菜单显示条件可以自定义,根据需求设置 然后将这个整体功能创建为一个全局组件 代…...

如何配置,npm install 是从本地安装依赖

在 Node.js 中&#xff0c;要使npm install从本地安装依赖&#xff0c;可以按照以下步骤进行配置&#xff1a; 一、准备本地依赖包 确保你有本地的依赖包。这个依赖包可以是一个包含package.json文件的文件夹&#xff0c;或者是一个已经打包好的.tgz文件。 二、使用相对路径…...

Python画图3个小案例之“一起看流星雨”、“爱心跳动”、“烟花绚丽”

源码如下&#xff1a; import turtle # 导入turtle库&#xff0c;用于图形绘制 import random # 导入random库&#xff0c;生成随机数 import math # 导入math库&#xff0c;进行数学计算turtle.setup(1.0, 1.0) # 设置窗口大小为屏幕大小 turtle.title("流星雨动画&…...

MySQL安全加固十大硬核操作

MySQL安全加固十大硬核操作大纲数据库访问控制限制数据库的访问权限&#xff0c;仅允许授权用户和IP访问。修改MySQL配置文件中的bind-address参数&#xff0c;确保仅监听必要的网络接口。强化root账户安全禁止root账户远程登录&#xff0c;创建具有特定权限的替代管理账户。修…...

Matlab 2024b 新变化:手把手教你搞定TI C2000代码生成环境(含CCS避坑指南)

Matlab 2024b与TI C2000代码生成环境配置全指南&#xff1a;从版本差异到实战避坑 如果你是一位长期使用Matlab进行TI C2000系列芯片开发的嵌入式工程师&#xff0c;升级到2024b版本后可能会发现&#xff1a;熟悉的配置界面不见了&#xff0c;命令行里输入的命令也不一样了。这…...

LeetCode 53. 最大子数组和 超详细题解(贪心+分治+动规)

LeetCode 53. 最大子数组和 超详细题解&#xff08;贪心分治动规&#xff09; &#x1f3f7;️ 标签&#xff1a;动态规划、贪心算法、分治法、数组、经典面试题 &#x1f4ca; 难度&#xff1a;简单 | &#x1f4dd; 题目编号&#xff1a;53 | &#x1f5c2;️ 题型&#xff1…...

1999-2025.4汽车之家、懂车帝汽车配置信息数据库

汽车配置信息数据是连接汽车生产、销售、使用及后市场服务的核心纽带&#xff0c;对不同主体均具有不可替代的价值。对消费者可辅助决策&#xff0c;规避风险&#xff0c;对车企可指导研发&#xff0c;优化生产&#xff0c;对经销商可精准销售&#xff0c;提升转化&#xff0c;…...

Mermaid CLI深度技术解析:如何构建企业级图表自动化流水线

Mermaid CLI深度技术解析&#xff1a;如何构建企业级图表自动化流水线 【免费下载链接】mermaid-cli Command line tool for the Mermaid library 项目地址: https://gitcode.com/gh_mirrors/me/mermaid-cli Mermaid CLI作为文本图表转换的命令行工具&#xff0c;正在成…...

Cursor Pro功能扩展工具:技术原理与开源解决方案

Cursor Pro功能扩展工具&#xff1a;技术原理与开源解决方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial re…...

嵌入式软件开发规范与最佳实践指南

嵌入式软件开发最佳实践指南1. 项目概述1.1 嵌入式开发核心挑战现代嵌入式系统开发面临代码复杂度增加、团队协作需求提升以及产品迭代周期缩短等多重挑战。高效的开发流程和规范的编码实践成为保证项目成功的关键因素。1.2 开发环境配置建议推荐采用以下硬件配置方案&#xff…...

Axure RP全版本界面本地化:从问题诊断到安全部署的完整指南

Axure RP全版本界面本地化&#xff1a;从问题诊断到安全部署的完整指南 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包&#xff0c;不定期更新。支持 Axure 9、Axure 10。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn …...

从像素到对象:如何用HANet和SNUNet搞定遥感影像中的‘小目标’与‘不平衡’难题?

从像素到对象&#xff1a;HANet与SNUNet在遥感影像小目标检测中的实战解析 当洪水退去后的灾损评估卫星图上&#xff0c;那些被冲毁的农舍屋顶往往只占据几个像素&#xff1b;在城市违建监测中&#xff0c;新增的违章建筑可能只是高分辨率影像中的微小色块。这些"小目标&q…...

MobaXterm远程免密登录疑难杂症全解析:从pk.pub到authorized_keys的避坑指南

1. 密钥文件格式的坑&#xff1a;从pk.pub到ppk的生死局 第一次用MobaXterm配置SSH免密登录时&#xff0c;我对着那个死活弹不出警告的"pk.pub"文件发了半小时呆。后来才发现Windows这个老狐狸默认隐藏了文件扩展名&#xff0c;我的"pk.pub"其实是个披着羊…...