如何在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

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

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

相关文章

在emacs中,设置latex的主文档

文档&#xff1a; chapter1.tex chapter2.tex main.tex 在chapter1.tex中&#xff0c;先按下 ctrlc ctrln&#xff0c;再按下ctrlc ctrla&#xff0c;在下方的提示框中输入主文档。

支付宝小程序介入人脸识别(金融级--前端部分)

在这里只做前端部分说明: 详情参考文档:如何通过集成支付宝小程序唤起实人认证服务_实人认证-阿里云帮助中心 操作步骤 调用 API 发起认证。 发起认证服务。 调用 startBizService 接口请求认证。 function startAPVerify(options, callback) {my.call(startBizService, {n…

AWS S3加密

Hello大家好&#xff61; 在本课时我们将讨论S3加密相关的内容。 S3加密相关是认证考试的一个重要的主题考点&#xff0c;您需要了解亚马逊S3的几种不同类型的加密方式。| 首先是静态数据的加密&#xff0c;静态数据加密是指数据存储在亚马逊S3 数据中心的磁盘上时&#xff0…

stable diffusion和midjourney哪个好

midjourney和stable diffusion哪个好&#xff1f;midjourney和stable diffusion的区别&#xff1f;那么今天就从这2款软件入手&#xff0c;来探索一下他们的功能的各项区别吧&#xff0c;让你选择更适合你的一款ai软件。 截至目前&#xff0c;我们目睹了生成式人工智能工具的在…

Linux —— 网络基础(一)

目录 一&#xff0c;计算机网络背景 二&#xff0c;网络协议初识 三&#xff0c;网络传输基本流程 四&#xff0c;网络中的地址管理 一&#xff0c;计算机网络背景 网络发展 独立模式&#xff0c;计算机之间相互独立&#xff1b;网络互联&#xff0c;多台计算机连接在一起…

flink1.15 异步维表Join 用于外部数据访问的异步 I/O scala版本

官方文档 Asynchronous I/O for External Data Access 异步 I/O | Apache Flink 核心问题 问什么有官方文档,我还要写个博客,因为scala Future这块有坑. 1 为什么我的算子显示反压100% 2 为什么我的任务不报错,也没有输出 3 Future对象我该怎么构建,有哪些注意事项. pom …

面试算法32:有效的变位词

题目 给定两个字符串s和t&#xff0c;请判断它们是不是一组变位词。在一组变位词中&#xff0c;它们中的字符及每个字符出现的次数都相同&#xff0c;但字符的顺序不能相同。例如&#xff0c;"anagram"和"nagaram"就是一组变位词。 分析 如果只考虑英文…

【OpenCV实现图片以及视频的读取、显示、保存以及绘图函数】

文章目录 图片视频从文件读取视频保存一个视频绘图函数 图片 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个广泛应用于计算机视觉和图像处理领域的开源库。它提供了丰富的图像处理工具和算法&#xff0c;使得开发者能够轻松实现各种图像处理任务。…

科普丨语音芯片烧录流程概述

语音芯片的烧录是将特定的固件或软件加载到芯片中&#xff0c;以使其能够执行特定的语音处理功能。以下是一般的语音芯片烧录过程&#xff1a; 1. 准备固件或软件&#xff1a;开发人员需要编写或获取特定的固件或软件&#xff0c;这些固件或软件包含了语音处理算法和功能的代码…

win11的下载地址,方便查找

win11的下载地址&#xff0c;收藏方便查找 www.microsoft.com/zh-cn/software-download/windows11/

【周末闲谈】VR新视界,“眼”见未来

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言虚拟现实(VR)技术虚拟现实技术的原理虚拟现实技术发…

高精度时间测量(TDC)电路MS1022

MS1022 是一款高精度时间测量电路&#xff0c;内部集成了模拟比 较器、模拟开关、施密特触发器等器件&#xff0c;从而大大简化了外 围电路。同时内部增加了第一波检测功能&#xff0c;使抗干扰能力大 大提高。通过读取第一个回波脉冲的相对宽度&#xff0c;用户可以获 得接…

laravel的默认首页怎么改-laravel框架默认欢迎页面如何修改

laravel的默认首页怎么改 搭建好的laravel的默认首页怎么改 我们有两种改动方式&#xff1a; 第一种修改默认路由&#xff1a; 下一步是要移除Laravel应用程序默认的欢迎页路由。这个路由可以在routes/web.php文件的顶部找到&#xff0c;看起来类似于以下代码&#xff1a; …

Cypress 与 Selenium WebDriver

功能测试自动化工具的王座出现了新的争夺&#xff1a;Cypress.io。赛普拉斯速度快吗&#xff1f;是的。赛普拉斯是交互式的吗&#xff1f;是的。赛普拉斯可靠吗&#xff1f;你打赌。最重要的是……这很酷&#xff01; 但 Cypress 是Selenium WebDriver的替代品吗&#xff1f;S…

React 中的 useState() 是什么?

在 React 中&#xff0c;useState() 是一个用于在函数组件中声明状态的 Hook。它是 React 16.8 引入的一种新的状态管理方式。 useState() 函数返回一个数组&#xff0c;其中包含两个元素&#xff1a;当前的状态值和一个更新状态值的函数。用数组的解构赋值来获取这两个元素。…

CentOS 7 中安装Kafka

文章目录 安装JDK解压环境变量验证 安装ZooKeeper下载解压环境变量配置启动开放端口 安装Kafka下载解压配置启动 CentOS 7.6 JDK 1.8 ZooKeeper 3.5.7 Kafka 2.11-2.4.0 安装JDK 解压 # 解压 tar -xzvf jdk-8u181-linux-x64.tar.gz mv jdk1.8.0_181 /usr/local/jdk1.8环境变量…

OpenGL —— 2.7、绘制多个自旋转的贴图正方体(附源码,glfw+glad)

源码效果 C源码 纹理图片 需下载stb_image.h这个解码图片的库&#xff0c;该库只有一个头文件。 具体代码&#xff1a; vertexShader.glsl #version 330 corelayout(location 0) in vec3 aPos; layout(location 1) in vec2 aUV;out vec2 outUV;uniform mat4 _modelMatrix; …

微信小程序进阶——Flex弹性布局轮播图会议OA项目(首页)

目录 一、Flex弹性布局 1.1 什么是Flex弹性布局 1.1.1 详解 1.1.2 图解 1.1.3 代码演示效果 1.2 Flex弹性布局的核心概念 1.3 Flex 弹性布局的常见属性 1.4 Flex弹性布局部分属性详解 1.4.1 flex-direction属性 1.4.2 flex-wrap属性 1.4.3 flex-flow属性 1.4.4 ju…

DFS(分布式文件系统)与 DFSR(分布式文件系统复制)的区别

DFS&#xff08;分布式文件系统&#xff09;和 DFSR&#xff08;分布式文件系统复制&#xff09;是两种不同的技术&#xff0c;尽管它们在名称上有一些相似之处&#xff0c;但它们的用途和功能有所不同。 DFS&#xff08;分布式文件系统&#xff09; DFS 是一种用于创建和管理…

Win10系统开机启动文件夹在哪里找?

Win10系统开机启动文件夹在哪里找&#xff1f;Win10系统开机启动文件夹是一个非常重要的目录&#xff0c;它决定了电脑在开机的时候&#xff0c;会有哪些应用程序是自动启动。但是&#xff0c;很多新手用户不知道Win10电脑内开机启动文件夹的具体位置&#xff0c;下面小编介绍开…