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

步骤:

  1. 自定义指令
  2. 判断图片是否进入视口
  3. 只有进入视口的图片才发送网络请求
  4. 代码优化

自定义指令

main.js

app.directive('img-lazy', {mounted(el,binding) {// el是绑定的img元素,binding.value是图片srcconsole.log(el, binding.value)}
})

绑定元素:

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

判断图片是否进入视口

直接使用 vueuse 的 useIntersectionObserver 方法:useIntersectionObserver 。

main.js

import { useIntersectionObserver } from '@vueuse/core'app.directive('img-lazy', {// 挂载完毕mounted(el,binding) {console.log(el, binding.value)// 监听 el 元素,isIntersecting 判断是否进入视口区域useIntersectionObserver(el,([{ isIntersecting }]) => {if (isIntersecting) {el.src = binding.value}},)}
})

绑定元素:

通过自定义指令来发送图片网络请求。

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

代码优化

封装自定义懒加载插件

import {useIntersectionObserver} from "@vueuse/core";/*** 自定义懒加载插件* @type {{install(*): void}}*/
export const lazyPlugin = {install(app) {app.directive('img-lazy', {mounted(el,binding) {useIntersectionObserver(el,([{ isIntersecting }]) => {if (isIntersecting) {el.src = binding.value}},)}})},
}

入口文件注册:

import {lazyPlugin} from "@/directives/index.js";
app.use(lazyPlugin)

禁止重复监听

useIntersectionObserver 中存在一个 stop 方法。通过请求图片资源后调用该方法可以实现禁止重复监听。

export const lazyPlugin = {install(app) {app.directive('img-lazy', {mounted(el,binding) {const {stop} = useIntersectionObserver(el,([{ isIntersecting }]) => {if (isIntersecting) {el.src = binding.valuestop()}},)}})},
}

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

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

相关文章

Rhino.Inside带材质将Revit模型bake到Rhino

Hello大家好&#xff01;我是九哥~ 今天来讲一个小技巧&#xff0c;就是我通常采用RIR将Revit的模型的Geometry Bake到Rhino&#xff0c;肯定是没有材质的&#xff0c;那么如果我们需要带材质那要怎么办呢&#xff1f; 对于会的人&#xff0c;其实挺简单的&#xff0c;只需要…

linux 生成 ca 证书

自建证书 创建用私钥签名的证书 生成私钥 openssl genrsa -out private.key 2048生成证书请求 openssl req -new -key private.key -out server.csr这一步需要填写证书信息&#xff0c;如 You are about to be asked to enter information that will be incorporated into…

2 月 6 日算法练习- 深度优先搜索

砝码承重 【问题描述】 你有一架天平和 N 个砝码&#xff0c;这 N 个砝码重量依次是 W1,W2,...,WN。请你计算一共可以称出多少种不同的正整数重量&#xff1f;注意砝码可以放在天平两边。【输入格式】 输入的第一行包含一个整数 N。第二行包含 N 个整数&#xff1a;W1,W2,W3,.…

Python面试题19-24

解释Python中的装饰器&#xff08;decorators&#xff09;是什么&#xff0c;它们的作用是什么&#xff1f; 装饰器是一种Python函数&#xff0c;用于修改其他函数的功能。它们允许在不修改原始函数代码的情况下&#xff0c;动态地添加功能。解释Python中的文件处理&#xff08…

可解释性AI(XAI):开启AI决策过程透明化,重塑信任与解决伦理偏见

文章目录 每日一句正能量前言可解释性AI的定义与重要性什么是可解释性&#xff1f;促进技术应用的可信度提高技术的透明度保护隐私和数据权益促进AI的社会接受度 可解释性AI的挑战与难点可解释性AI的应用场景后记 每日一句正能量 宁可因高目标而脖子硬&#xff0c;也不要为低目…

【大数据面试题】004 Flink状态后端是什么

一步一个脚印&#xff0c;一天一道大数据面试题。 在实时处理中&#xff0c;状态管理是十分常用的。比如监控某些数据是否一直快速增长。那就需要记录到之前的状态&#xff0c;数值。 那作为最热门的实时处理框架&#xff0c;Flink对状态管理是有一套的。那就是状态后端&…

Undertow使用详解

简介 Undertow是一个开源的、灵活的、高性能的非阻塞性应用服务器&#xff0c;由JBoss提供。它可以用作嵌入式服务器&#xff0c;也可以用作大型项目的全功能应用服务器。Undertow的设计以提供最高的性能和最大的灵活性为主要目标&#xff0c;支持非阻塞性和阻塞性处理方式&…

<网络安全>《18 数据安全交换系统》

1 概念 企业为了保护核心数据安全&#xff0c;都会采取一些措施&#xff0c;比如做网络隔离划分&#xff0c;分成了不同的安全级别网络&#xff0c;或者安全域&#xff0c;接下来就是需要建设跨网络、跨安全域的安全数据交换系统&#xff0c;将安全保障与数据交换功能有机整合…

ubuntu22.04@laptop OpenCV定制化安装

ubuntu22.04laptop OpenCV定制化安装 1. 源由2. 默认配置3. 定制配置4. 定制安装5. 定制OpenCV-4.9.05.1 修改opencv.conf5.2 加载so文件5.3 修改bash环境变量5.4 增加pkgconfig5.5 检查OpenCV-4.9.0安装 6. 总结7. 参考资料 1. 源由 目前&#xff0c;能Google到的代码层次不齐…

openkylin(Debian系)安装nginx及安装前需要的准备

前言 现在很多linux系统都可以使用高级包管理工具安装软件了&#xff0c;但是在像是 openkylin这些新系统中&#xff0c;好多软件包虽然有&#xff0c;但是因为其依赖的包还没有做好&#xff0c;所 以安装会提示你一大堆依赖错误。所以还是要自己来编译安装咯。安装前准备&…

PoEAA笔记-7.分布策略

本文摘抄自PoEAA&#xff0c;详细信息请阅读本书 7.1 分布对象的诱惑 透明性非常有用&#xff0c;但虽然有很多东西在分布对象中可以是透明的&#xff0c;但性能却不在其中&#xff0c;尽管上面的架构师是为了提高性能而使用分布组件的&#xff0c;但他的设计只会影响性能&…

RCS系统之:机器人状态

在设计RCS系统平台时&#xff0c;机器人总共设计状态有&#xff1a; 离线模式&#xff1b; 如图&#xff0c;18号机器人呈灰黑色&#xff0c;表示机器人没有上电状态 工作模式&#xff1b; 如图&#xff0c;10号机器人成绿色&#xff0c;表示机器人处于工作模式&#xff0c;等…

如何区分Linux中标准分区与lvm分区

以下是标准分区 以下包含lvm分区

Android14音频进阶:MediaPlayerService如何启动AudioTrack 上篇(五十五)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只…

练习题解(关于最小生成树)

目录 1.【模板】最小生成树 2.无线通讯网 3.拆地毯 4.营救 1.【模板】最小生成树 P3366 【模板】最小生成树 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述 如题&#xff0c;给出一个无向图&#xff0c;求出最小生成树&#xff0c;如果该图不连通&#xff0c;则…

【图像拼接】论文精读:A Virtual Reality Video Stitching System Based on Mirror Pyramids

第一次来请先看这篇文章:【图像拼接(Image Stitching)】关于【图像拼接论文精读】专栏的相关说明,包含专栏使用说明、创新思路分享等(不定期更新) 图像拼接系列相关论文精读 Seam Carving for Content-Aware Image ResizingAs-Rigid-As-Possible Shape ManipulationAdap…

TOML格式配置的frp服务搭建

从frp v0.52.0 版本开始&#xff0c;frp 将TOML作为配置文件格式。INI 格式已被弃用&#xff0c;并将在未来的发布中移除。因此&#xff0c;frp v0.52.0 及更高版本的配置文件默认为TOML格式。 项目地址 GitHub&#xff1a;https://github.com/fatedier/frp/releases 服务端…

离线场景下任意文档的在线预览及原样格式翻译,不依赖其他厂商接口非侵入式一行js代码实现网站的翻译及国际化,可配置使用多种翻译语言

离线场景下任意文档的在线预览及原样格式翻译&#xff0c;不依赖其他厂商接口非侵入式一行js代码实现网站的翻译及国际化&#xff0c;可配置使用多种翻译语言。 要实现翻译需要解决以下3个主要问题&#xff1a; 1&#xff09;from&#xff1a;内容本身的语言类型是什么&#xf…

别人还在集五福,星河社区开发者已经奖品拿到手软了!

AI新年新玩法你是否曾为AI应用的神奇而惊叹&#xff1f;你是否想过用AI为你定制新年写真&#xff1f;无需编程&#xff01;&#xff01; 飞桨星河社区帮你实现&#xff0c;还可赢取新年礼包&#xff01; 先速来看看攻略吧&#xff01;页面底部见活动详情。 玩法1攻略&#xff…

Multisim14.0仿真(五十六)74LS76双JK触发器应用设计

一、74LS76简介: 74LS76是 带有独立的 JK 时钟脉冲、直接清除输入和直接设置的双JK触发器。当时钟设置为高电平时,将接收数据