Vue项目中常见问题(61)图片懒加载+自定义事件

最新推荐文章于 2023-01-19 17:49:49 发布
最新推荐文章于 2023-01-19 17:49:49 发布
阅读量409 收藏 2
点赞数
分类专栏： vue前台管理项目 文章标签： vue.js javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124990073
版权

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

业务需求:优化项目

图片懒加载

1.安装插件

2.去入口文件引入插件

3.使用图片懒加载

 自定义事件

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求:优化项目

图片懒加载

网址: vue-lazyload - npm

1.安装插件

npm i vue-lazyload -S

2.去入口文件引入插件

 在main.js中:

 

3.使用图片懒加载

图片在我们的搜索页面中,大量使用,所以我们在该页面中,使用懒加载

在pages/Search/index.vue中:

找到图片对应的结构

 改为:

你知道这里为什么用v-lazy吗,后面自定义事件里面详细讲解

这个时候我们在搜索页面刷新,页面会先加载我们设定的gif图,这里我设置的是火影忍者,之后才会加载我们本来的图

 

 自定义事件

 在src下新建一个plugins文件夹,里面在建一个myPlugins.js文件

 在main.js中引入安装:

 控制台:

我们只要一使用这个自定义插件,就会调用install

在src/plugins/myPlugins.js中

install不是自己调用的,是外面main.js调用的,并且还给该函数注入了一个参数Vue

我们可以测试一下:

控制台:打印Vue

 

 那么他为什么要给该函数注入Vue呢,因为Vue.prototype,拿到他以后可以做很多事,加原型身上,组件都可以使用

我们在测试一下第二个参数:

 在main.js中:

在src/plugins/myPlugins.js中

 

打印:

 这就是为什么v-lazy能挂在组件身上,因为他增加了全局指令

 在App.vue中:测试

在src/plugins/myPlugins.js中

 

 控制台执行成功:

继续测试:

在src/plugins/myPlugins.js中

 第一个参数是绑定的元素

在src/plugins/myPlugins.js中

测试第二个参数:

 

 第二个参数是我们传入的对象

 操作DOM,把上图中的value从小写的abc,变成大写的ABC

 当然,第二个参数里面还有一个modifiers:是修饰符

指令也是可以加修饰符的

 我们在App.vue中:

 修饰符添加成功:

 

学无止境QAQ
关注
专栏目录
vue 图片懒加载
BYH的博客
01-02 246
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
vue-lazyload 懒加载 一些注意事项
往后橘生
06-29 1万+
一、简介懒加载可以说的上是很基础的功能了，但是平时也用的非常广泛。在vue中有很多懒加载的插件，今天给大家带来一个我比较常用的插件的一些注意事项。二、安装$ npm install vue-lazyload -D三、官方链接这里附上官方文档链接 vue-lazyload四、注意事项栗子代码(此处将本地图片地址改为了接口请求到的图片地址，其他同官方文档)&lt;div v-lazy-containe...
Vue lazyload懒加载使用
山外小楼
02-28 6518
当我们项目使用到大量的图片时候，为了解决不必要的资源浪费，一般会选择一个懒加载。下面就说一下vue-lazyload插件的使用第一步。下载 npm install vue-lazyload 第二步。在main.js中启用此插件 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload,{ loading:'../static/img/...
vue中实现图片懒加载的方法（二）
weixin_54145360的博客
11-14 1482
vue图片懒加载为什么组件内部直接写 img 会有卡顿现象？而动态创建的img 标签则很流畅，这是什么原因
vue图片懒加载
最新发布
weixin_49554584的博客
01-19 6582
我们使用软件的时候，会有很多图片需要加载，但是当网络环境不好，或内存不足的情况，就会导致用户首屏加载特别慢，影响用户体验，所以为了解决这个问题，提出了图片懒加载的方法来解决该问题。这样做的好处就是可以使用当前网络环境来全力加载该可视区域的图片，增加加载速度；②首屏加载时候img标签src赋为空值，这样就不会去渲染看不见的图片而浪费时间。③当用户滑动到图片的可视区域后，替换src的路径，改为正式路径，则开始渲染图片。①当图片区域到达用户界面可视区域的时候才进行加载图片。
VUE DOM加载后执行自定义事件的方法
10-18
在Vue.js开发中，DOM加载后执行自定义事件是一个常见的需求，特别是在数据绑定和组件交互时。本篇文章将深入探讨如何在Vue实例中处理这个问题，特别是针对案例中遇到的图片轮播初始化问题。 首先，Vue.js 提供了一...
vue3 - 图片懒加载(封装自定义指令)
m0_50125215的博客
08-13 918
图片懒加载 目的： 当图片进入可视区域内去加载图片，且处理加载失败，封装成指令。 基于vue3.0和 useIntersectionObserver 封装懒加载指令 下载@vueuse/core工具库 官方网站： https://vueuse.org/functions.html 安装：@vueuse/core 包，它封装了常见的一些交互逻辑。 npm i @vueuse/core 或 yarn add @vueuse/core vue3 封装自定义指令 index.js import default
vue图片加载失败时用默认图片替换的方法
10-16
在Vue.js应用中，处理图片加载失败的情况是常见的需求，特别是在提供用户界面时，确保即使图片资源出现问题，也能保持良好的用户体验。本篇文章将详细介绍如何在Vue中实现图片加载失败时用默认图片进行替换。 首先...
详解vue项目中实现图片裁剪功能
10-16
在Vue项目中实现图片裁剪功能是常见的需求，特别是在用户上传头像或处理图像时。本文将详细介绍如何在Vue 3.6.3版本的环境中使用两种不同的方法来实现这一功能：一是借助`cropperjs`插件，二是利用原生的`canvas`...
VUE（修饰符+自定义指令directive+组件Component+组件交互+自定义事件+插槽slot）
qq_40409416的博客
03-18 1100
VUE 修饰符 v-model lazy修饰符：在鼠标焦点移出input框之后才会更新数据
vue自定义指令---图片懒加载
niceday的博客
09-04 815
图片懒加载
js和vue的图片加载完成事件
小太阳的博客
01-14 6434
我的场景：需要图片在加载完成之后，获取图片的高度，给别的组件传值 语法：onload 事件在图片加载完成后立即执行 可以使用img的onload事件，等图片加载完成之后再执行其他操作 js <body> <img src="xxx" onload="getImg()" > <script> function getImg() { console.log('需要执行的操作'); } </script> </bo
vue中实现图片的懒加载
热门推荐
jiangjunyuan168的博客
04-19 1万+
1、安装vue-lazyload插件 npm install vue-lazyload --save-dev 2、在main.js中进行引用 import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload); //或者自定义配置插件 Vue.use(VueLazyload, { preLoad: 1.3, error: require('../src/assets/image/error.png'), loading: require('../
vue中实现图片懒加载的方法（一）
weixin_54145360的博客
11-10 8487
主要思路就是在可视区域内得图片进行加载，反之默认不做图片得请求，可以用我们本地自己定义得比较小得loading图代替（当然这个loading图片也会做网络请求，但是是我们自己定义的，那便可空，选的图会比较小，而且在同一时刻，相同图片只会请求一次），本次实现，源码里没有给默认的loading图片，而是把图片加载之前的样式，以及图片加载失败后的样式交给使用者自己定义。方案1： 传统实现图片懒加载，会去监听滚动条的变化，当图片进入可视区域内，通过监听当前图片以及滚动条位置，判断是否已经进入可视区域。
vue图片懒加载(非插件)
JunVei的博客
08-13 1458
首先我们需要拿到存放img的整个div标签的clientHeight高度，和滚动条滚动的高度scrollTop，还需要拿到每个img距离父级div最顶部的距离也就是offsetTop，这个值在页面初始化时，就开始是固定不变的，所以就可以通过这个距离进行判断，是否出现在可见区域，（如果对这几个高度不理解的，可以看我先前发的一篇，关于这些高度的解说~）(这里我在写的时候发现，如果给src设置的值为空字符串，他每次就会直接把值赋值给src,就没有性能优化的效果了)最后附上一个效果图（注意观看右边的网络请求）...
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
u012443286的博客
05-15 4911
 对于vue项目而言，图片懒加载是一个常见的图片加载方案，可以优化用户体验，而vue-lazyload则是一个广泛使用的插件。  对于某些业务场景，我们需要监听图片加载失败事件，而后进行相应的处理，然而无论是官方文档还是网络上的解决方案都不直观甚至有错误，开发者不经过一番探索，很难知道如何处理，甚至怀疑该插件是否能监听加载失败事件。笔者经过一番探索，所幸的是，发现该问题终究是能够解决的，现将相关解决方案分享如下。 业务场景 试想这样的场景： 在img标签上，使用v-lazy绑定的图片的地址。图片的地址可能
vue实现图片懒加载
刘泽华的博客
10-23 6991
vue图片懒加载使用 首先第一步，安装插件 vue-lazyload npm install vue-lazyload --save-dev 在man.js中引入插件 import VueLazyLoad from 'vue-lazyload' 使用 Vue.use(VueLazyLoad,{ error:'', //加载失败的图 loading:'' //加载中的默认图 }...
085：vue+openlayers 加载gif图片动画 （示例代码）
大剑师兰特的GIS世界
08-24 1388
本示例的目的是介绍演示如何在vue+openlayers中通过gifler来添加gif文件。
Vue三步打造图片懒加载插件：Vue.use()与direction指令应用
本文档主要介绍了如何在Vue框架中实现一个图片懒加载插件，这是一个常见的性能优化策略，对于电商平台等具有大量图片展示的场景尤其重要。作者采取了分步骤的方法，首先介绍了如何利用Vue的`Vue.use()`函数来安装和...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值