Vue.js如何实现对一千张图片进行分页加载?
目录
vue处理一千张图片进行分页加载
分页加载、懒加载---概念介绍:
思路:
开发过程中,如果后端一次性返回你1000多条图片或数据,那我们前端应该怎么用什么思路去更好的渲染呢?
第一种:我们可以使用分页加载
第二种:我们可以进行懒加载
分页加载、懒加载---概念介绍:
分页加载和懒加载都是用于优化网页性能和用户体验的技术。
分页加载是指将一个大型内容列表分成多个小的部分(例如每页显示10个),然后在用户向下滚动页面时,加载下一页的内容。这种技术可以减少页面加载时间和带宽使用,并提高页面的反应速度。此外,分页加载还可以让用户更轻松地找到他们想要的内容,而不必一次性浏览大量的内容。
懒加载是指在用户浏览网页时,仅加载当前可见的部分内容,而不是一次性加载整个页面。例如,在一个包含多张图片的页面中,只有当用户向下滚动页面时,才会加载下面的图片。这种技术可以减少页面加载时间和带宽使用,提高页面的反应速度,并减少对服务器的负载。此外,懒加载还可以让用户更快速地访问网页,因为他们不必等待整个页面加载完毕。
需要注意的是,分页加载和懒加载并不是互斥的概念,有些情况下可以同时使用这两种技术来进一步提高网页性能和用户体验。
那我们用第一种方法使用分页加载的方法进行渲染
思路:
//dataList 在data中定义的数组来接收总数居
//imgList 在data中定义的数组来接受页面显示图片的数组
- 第一步:我们定义一个数组并且将1000条数据赋值给它
- 第二步:我们先解决分页的问题,我们使用
el-pagination
组件先给该组件 的"total"、"page"、"limit"
分别赋值 - 第三步:页面初始化的时候,我们首先加载dataList的前十条数据具体代码如下:
this.imgList = this.dataList.slice(0,10)
- 第三步:当我们点击分页时,我们给
el-pagination
组件添加@pagination
事件,在事件的方法中,我们可以获取到当前页面以及当前显示条数
我们在这个方法中需要给el-pagination
组件中"size"、"page"
参数赋值,然后在截取dataList在该页面的数据并且给imgList数组进行赋值。
//获取该页的数据 let minNum = (val.page - 1)*val.limit let maxNum =val.page*val.limit this.imgList = dataList.slice(minNum,maxNum)
具体代码
//渲染容器
<el-card class="box-card"v-for="(item,index) in imglist":key="item"shadow="hover"><div class="box-card-div"><imgclass="screen-img":src="item.img":key="index":alt="item.name"/><div class="title">{{ item.name }}</div></div>
</el-card>//分页
<paginationv-show="toggPage.total > 0":total="toggPage.total":page.sync="toggPage.currentPage":limit.sycn="toggPage.size"@pagination="togghandleCurrentChange"/>
//因为业务需求封装的方法
queryImgList(){//给页面家了一个loadingthis.imgloading = true//获取分页总条数this.toggPage.total = this.dataList.length//页面初始化时显示的前十条数据this.imgList = dataList.slice(0,10)this.imgloading = false
},
togghandleCurrentChange(val){//如果不知道val可以在这打印console.log('val',val)this.imgloading = truethis.toggPage.size = val.limitthis.toggPage.currentPage = val.page//记得将数据先制空在进行赋值,否则你懂的this.imgList = []//获取当前页面的数据let minNum = (val.page - 1)*val.limitlet maxNum = val.page*val.limitthis.imgList = this.dataList.slice(minNum,maxNum)this.imgloading = false
}
以上就可以完美结果该需求了,因为我们需求更复杂,删了不少代码
如果更想完美可以它加一个模糊查询
我们以图片名称或者某个字段进行查询
思路:
queryImgValue //输入框绑定的值
queryBtn // 查询按钮事件方法名称
- 第一步: 添加一个
el-input
给输入框绑定一个v-model
,然后添加el-button
并且添加一个@click
事件 - 第二步: 点击按钮触发
queryBtn
方法,在该方法中循环dataList
然后根据循环的item.name
跟queryImgValue
进行匹配,如果包含输入的值就push
到一个新数组并且给this.imgList
进行赋值
具体代码:
queryBtn(){//之所以判断是否为空 -----如果用户没有输入直接点击就没必要再去执行下面代码if(this.queryImgValue){let img = []//循环该数据进行匹配this.dataList.forEach(item => {//如果name包含用户输入的名称将该条数据push到新数组中if(item.name.includes(this.queryImgValue)){img.push(item)}})//赋值给imgList,不要忘记还需要给查询的总条数赋值哟this.imglist = imgthis.toggPage.total = this.imglist.length}
}
以上就很完美啦!!!
Vue.js如何实现对一千张图片进行分页加载?相关推荐
- vue处理一千张图片进行分页加载
vue处理一千张图片进行分页加载 开发过程中,如果后端一次性返回你1000多条图片或数据,那我们前端应该怎么用什么思路去更好的渲染呢? 第一种:我们可以使用分页加载 第二种:我们可以进行懒加载 那我们 ...
- php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能,1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码 ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- imagesLoaded-检测图片是否正确加载的js插件
简要教程 imagesLoaded是一款用于检测页面中的图片是否被加载的js插件.imagesLoaded是非常有用的插件,当你的页面中某幅图片没有被加载时,默认会显示一个红叉或图片alt文本,ima ...
- 移动端图片居多,加载过慢,使用延迟加载|懒加载( lazyload.js)
文章目录[隐藏] Lazy Load 插件原理 开始使用 lazyload.js lazyload.js 高级使用方法: 更周全的做法 提前加载 自定义触发事件 自定义显示效果 把图像插入某个容器 加 ...
- js虚拟代理实现图片的预加载
<h1>虚拟代理实现图片的预加载</h1><p>在Web开发中,图片预加载是一种常见的技术,如果直接给某个img标签节点这只src属性,由于图片过大或者网络不佳,图 ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- 微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
最新文章
- 51NOD 1287 加农炮(不水的线段树)
- 计算TD-LTE DL 峰值速率的工具和相关参数
- 实验探究 ioremap
- 面向小白:git和github的简明使用教程
- 阿里巴巴发送短信接口的使用
- 2020项目商机_2020未来商机,一万元可以做什么项目
- k8s核心技术-Ingress(概述)---K8S_Google工作笔记0041
- Java中Xml文件的解析
- 小米蓝牙左右互联_399元,真香!小米蓝牙耳机Air,同价位比有线体验还出色?...
- 中职学校计算机课听课记录表,中职语文听课记录10篇
- EXCEL数据行数达上线,读取发生错误
- Could not start AVD
- 常用的神经网络控制结构,神经网络控制的特点
- 《机器学习 公式推导与代码实现》随书PPT示例
- express項目部署阿里云服务器
- 单片机的电池供电电路
- 工程数学 | 两种中值定理傻傻分不清
- Web渗透攻击之vega
- 大数据(线性/非线性)降维方法(PCA,LDA,MDS,ISOMAP,LLE)
- 自动驾驶/智能网联在物流小车末端配送示范应用现状