vue图片懒加载(IntersectionObserver 监听元素是否出现或离开可视区域)
本文目录
IntersectionObserver 监听元素是否出现或离开可视区域
IntersectionObserver 这个 API,它是异步的,不会卡主线程,相比以前监听滚动事件计算可视区域的元素,更优秀,但是不兼容 IE,好在官方提供了 polyfill 来解决这个问题。详细地址: ***隐藏网址*** // 下面是一个手机端vue项目的应用 // 用来懒加载图片,列表一次拉20条数据,但是数据中有大图片, // 一次加载20张大图片很慢,所以把《li》中img设置成隐藏, // 然后循环的时候,通过序号curTargetIndex来添加class,把隐藏的图片样式设置成block(这步其实可以不写,直接用v-if判断img是否出现) // 实现图片懒加载,光是显示隐藏还不够,这个只是影响浏览器渲染 // 必须用用v-if判断是否插入img标签, 条件和通过序号curTargetIndex来添加class是一样的 // 《img v-if="v-if="(index 《= (activeIndex + 3) && index 》= (activeIndex - 2))"" /》
vue可以用的图片处理插件有吗
vue-lazyload-img - 移动优化的vue图片懒加载插件vue-image-crop-upload - vue图片剪裁上传组件vue-svgicon - 创建svg图标组件的工具vue-img-loader - 图片加载UI组件vue-image-clip- 基于vue的图像剪辑组件vue-progressive-image - Vue的渐进图像加载插件
vue提高gif流畅度
1、打包的时候不生成.map文件。打包的时候生成gzip文件,部署的时候,让nginx直接读取gzip文件。2、路由加载的时候采用懒加载模式。3、首页较大的图片适当的进行压缩即可。
8个非常实用的Vue自定义指令
在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。 Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。 批量注册指令,新建 directives/index.js 文件 在 main.js 引入并调用 指令定义函数提供了几个钩子函数(可选): 下面分享几个实用的 Vue 自定义指令 需求:实现一键复制文本内容,用于鼠标右键粘贴。 思路: 使用:给 Dom 加上 v-copy 及复制的文本即可 需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件 思路: 使用:给 Dom 加上 v-longpress 及回调函数即可 背景:在开发中,有些提交保存按钮有时候会在短时间内被点击多次,这样就会多次重复请求后端接口,造成数据的混乱,比如新增表单的提交按钮,多次点击就会新增多条重复的数据。 需求:防止按钮在短时间内被多次点击,使用防抖函数限制规定时间内只能点击一次。 思路: 使用:给 Dom 加上 v-debounce 及回调函数即可 背景:开发中遇到的表单输入,往往会有对输入内容的限制,比如不能输入表情和特殊字符,只能输入数字或字母等。 我们常规方法是在每一个表单的 on-change 事件上做处理。 这样代码量比较大而且不好维护,所以我们需要自定义一个指令来解决这问题。 需求:根据正则表达式,设计自定义处理表单输入规则的指令,下面以禁止输入表情和特殊字符为例。 使用:将需要校验的输入框加上 v-emoji 即可 背景:在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。 需求:实现一个图片懒加载指令,只加载浏览器可见区域的图片。 思路: 图片懒加载有两种方式可以实现,一是绑定 srcoll 事件进行监听,二是使用 IntersectionObserver 判断图片是否到了可视区域,但是有浏览器兼容性问题。 下面封装一个懒加载指令兼容两种方法,判断浏览器是否支持 IntersectionObserver API,如果支持就使用 IntersectionObserver 实现懒加载,否则则使用 srcoll 事件监听 + 节流的方法实现。 使用,将组件内 标签的 src 换成 v-LazyLoad 背景:在一些后台管理系统,我们可能需要根据用户角色进行一些操作权限的判断,很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。针对这种情况,我们可以通过全局自定义指令来处理。 需求:自定义一个权限指令,对需要权限判断的 Dom 进行显示隐藏。 思路: 使用:给 v-permission 赋值判断即可 需求:给整个页面添加背景水印 思路: 使用,设置水印文案,颜色,字体大小即可 需求:实现一个拖拽指令,可在页面可视区域任意拖拽元素。 思路: 使用: 在 Dom 上加上 v-draggable 即可
更多文章:
怎样找到ps中已锁定的图层?photoshop图层锁定怎么解锁
2024年6月9日 02:54
大智慧手机炒股下载(国泰君安大智慧手机版给个详细的下载地址!)
2024年6月25日 11:51
泰生活是什么保险?用泰生活app怎么让红利直接转到银行卡里面
2024年6月5日 06:38
用友t+软件(金蝶精斗云和用友T+财务软件哪个好用实用各自优缺点是什么)
2024年8月12日 07:16
nes游戏合集下载安卓版(求fc游戏安卓,无需模拟器的下载网址)
2024年5月1日 07:40
录入吧录入时没有原图?金蝶K3 委外加工费在什么地方维护不用每次都手工录入吧
2024年6月12日 22:36