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

如何在vue中实现图片懒加载

1.什么是图片懒加载

概念当图片还未出现在浏览器的可视区,图片并不加载src所引入的图片资源。只有当图片出现在可视区时,才加载图片资源。
好处:当页面中需要许多图片进行展示。但是,在我们不可视区的图片我们可以进行图片懒加载,加快可视区的图片显示,防止出现可视区过多图片不显示的效果。有利于提示用户的体验度。

2.在vue2中实现图片懒加载

通过自定义指令

1.在src下新建directives->lazy.js文件。并在lazy.js下书写以下代码
// 通过自定义指令 实现图片加载
export default {bind(el) {//1.将src保存后 清除el.srcconst src = el.srcel.src = ''const observe = new IntersectionObserver((entries) => {console.log('执行了');//2.出现在可视区 赋予src 加载图片if (entries[0].isIntersecting) {console.log(123);el.src = src//关闭 observe观察 防止多次执行observe.unobserve(el)}})observe.observe(el)}
}
2.在main.js中 书写以下代码
//自定义指令 实现 图片懒加载 引入 全局注册
import lazy from '@/directives/lazy'
Vue.directive('lazy', lazy)
3.在图片标签上 书写
<img v-lazy src="图片资源路径" />

相关知识点:https://v2.cn.vuejs.org/v2/guide/custom-directive.html

相关文章:

如何在vue中实现图片懒加载

1.什么是图片懒加载 概念当图片还未出现在浏览器的可视区&#xff0c;图片并不加载src所引入的图片资源。只有当图片出现在可视区时&#xff0c;才加载图片资源。 好处&#xff1a;当页面中需要许多图片进行展示。但是&#xff0c;在我们不可视区的图片我们可以进行图片懒加载…...

Mac 远程桌面软件

对于使用 Mac 计算机和笔记本电脑的企业来说&#xff0c;适用于 Mac 的远程桌面软件变得越来越重要&#xff0c;随着远程工作变得越来越普遍&#xff0c;IT 管理员和组织需要一种安全的方式来访问和修复问题、处理紧急任务以及监控远程工作站的状态&#xff0c;为了促进远距离协…...

EPLAN_005#宏边框、页宏、窗口宏/符号宏

一、宏边框 红边框不能用&#xff0c;变成了灰色 要在项目属性中更改位宏项目——才能使用宏边框功能 注意&#xff1a;创建宏边框时候要打开——显示隐藏元素 框选目标后&#xff0c;双击红边框的边——弹出红边框创建属性对话框——输入名称——更改变量ABC等 最后——自动…...

如何正确地使用ChatGPT(角色扮演+提示工程)

如何正确地使用ChatGPT 一、ChatGPT介绍二、准备工作2.1 获取ChatGPT环境2.2 确定使用ChatGPT的目标和需求 三、重要因素3.1 角色赋予3.2 提示工程 四、正确案例 一、ChatGPT介绍 可以查阅ChatGPT快速入门 二、准备工作 2.1 获取ChatGPT环境 国外的有OpenAI和微软NewBing等…...

MySQL服务安装与登录

&#xff08;1&#xff09;以管理员身份启动命令提示符&#xff1a; &#xff08;2&#xff09;定位到安装目录的bin目录下&#xff08;根据自己的安装路径进行调整即可&#xff09;。先输入“d:”&#xff0c;定位到d盘&#xff0c;输入cd空格文件路径&#xff08;直接复制粘贴…...

论文阅读之《Kindling the Darkness: A Practical Low-light Image Enhancer》

目录 摘要 介绍 已有方法回顾 普通方法 基于亮度的方法 基于深度学习的方法 基于图像去噪的方法 提出的方法 2.1 Layer Decomposition Net 2.2 Reflectance Restoration Net 2.3 Illumination Adjustment Net 实验结果 总结 Kindling the Darkness: A Practical L…...

性能测试基础知识及性能指标

前言&#xff1a;最近公司接了个项目&#xff0c;领导开会突然来了句&#xff0c;让我出一份性能测试方案&#xff0c;后面性能测试工作交给我&#xff01;我心里想之前面试没要求会这个啊&#xff08;最少得加钱才能做吧~&#xff0c;没办法既然下达了指令&#xff0c;那就只能…...

ArcGIS笔记10_如何创建渔网?

本文目录 前言Step 1 确定渔网的精度单位Step 2 有底图时创建渔网的操作 前言 ArcGIS中的渔网是一个很好用的工具&#xff0c;它可以创建出规规整整的小格子&#xff0c;每个小格子都对应一个标注点&#xff0c;可以将原本散乱的数据规整化&#xff0c;如下图&#xff1a; Ste…...

Jmeter安装(快速入门)

大家好我是苏麟今天简单聊一下Jmeter . Jmeter Jmeter官网 : Apache JMeter - Download Apache JMeter 安装Jmeter Jmeter依赖于JDK&#xff0c;所以必须确保当前计算机上已经安装了JDK&#xff0c;并且配置了环境变量。 下载 : 官网下载 : 网盘自取 : 链接&#xff1a;…...

一个react前端项目中的配置文件作用解析

前端框架中用到的配置文件 .editorconfig, .gitignore, .npmrc, .prettierignore, .prettierrc, .umirc.local.ts, .umirc.ts, package-lock.json, package.json, README.md, tsconfig.json, typings.d.ts, webpack.config.js.editorconfig&#xff1a;用于定义代码编辑器的配…...

MAC 配置 Maven

Maven 是一个流行的 Java 项目管理和构建工具&#xff0c;它可以帮助我们管理项目依赖、构建和发布等过程。本文将指导您在 MAC 上配置 Maven 的详细步骤。 1、下载 Maven 首先&#xff0c;从 Maven 官方网站下载最新版本的 Maven 安装包。下载完成后&#xff0c;将其解压到您…...

vue3.0 + element plus upload图片 上传

直接上图吧&#xff1a; 记录一下&#xff0c;方便后续遇到啥问题...

Leetcode 18:四数之和

给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;。 解题思路&#xff1a…...

word误删除的文件怎么恢复?恢复办法分享

在日常工作和学习中&#xff0c;我们常常会使用到Word来撰写文章、毕业论文、方案等。然而&#xff0c;我们可能会遇到Word误删文件的情况&#xff0c;令我们陷入恐慌&#xff0c;特别是这个文件很重要时。幸运的是&#xff0c;有办法找回。下面一起来看下word误删除的文件怎么…...

提高Qt开发软件运算性能提升

编译器minGW32&#xff0c;release版本&#xff0c;大部分操作在线程循环里面更容易体现出来 1、网上有说opencv像素处理使用直接获取Mat对象的像素块的数据指针,例如 for (int row 0; row < h; row) { uchar* uc_pixel image.data row * image.step; for (int col …...

WordPress SMTP邮件发送插件 Easy WP SMTP

Easy WP SMTP是一款 WordPress 邮件发送插件&#xff0c;WordPress 中经常用到邮件发送&#xff0c;包括新注册用户的邮件通知、找回密码通知、评论回复通知等。因为云服务器默认不启用 SMTP功能&#xff0c;所以需要安装 SMTP插件来解决这个问题。 SMTP 主机&#xff1a;smtp.…...

大咖云集,智慧碰撞|第 18 届 CLK 大会完整议程揭晓(内附报名通道)

自 2006 年以来&#xff0c;在国内 Linux 技术爱好者和行业公司的鼎力支持下&#xff0c;中国 Linux 内核开发者大会已走过 17个年头&#xff0c;是中国 Linux 内核领域最具影响力的峰会之一。今年的中国内核开发者大会依然秉承历届理念&#xff0c;以“自由、协作、创新”为理…...

springweb+vue前后端分离开发,集成部署

背景&#xff1a; 在自己做测试的时候&#xff0c;由于需要项目和项目的前端页面使用同样接口访问&#xff0c;所以需要将前端代码部署到后端项目下。前端采用vue&#xff0c;后端采用springboot。 首先时建立一个vue项目&#xff0c;这个可以参照网上的案例&#xff0c;创建方…...

美芯片禁令再次扩大,波及英伟达、AMD以及intel等科技公司 | 百能云芯

拜登政府17日宣布&#xff0c;计划停止英伟达&#xff08;Nvidia&#xff09;、超微半导体以及英特尔等科技公司设计的先进AI芯片输出中国大陆&#xff0c;英伟达&#xff08;Nvidia&#xff09;昨日股价重挫4.68%至每股439.38美元&#xff1b;天风国际证券分析师郭明錤表示&am…...

Docker入门到精通教程

Docker是什么 Docker是一个开源的应用容器引擎&#xff0c;它基于Go语言并遵从Apache2.0协议开源。容器技术是和我们的宿主机共享硬件资源及操作系统&#xff0c;实现资源的动态分配&#xff0c;在资源受到隔离的进程中运行应用程序及其依赖关系。 Docker可帮助更快地打包、测…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...