使用ElementUI走马灯Carousel组件加载慢的解决方案
2019-09-29 14:28
691 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/shenjuntao520/article/details/101690320
项目中使用ElementUI的走马灯组件Carousel时,发现组件渲染速度比较慢。一开始以为是后台接口处理速度慢,在后台统计了方法执行时间后发现很快。于是猜想是因为数据量太大,Carousel渲染速度就会比较慢。查阅ElementUI官方文档发现走马灯并不支持懒加载,所以就尝试了自己实现懒加载。思路是先只获取第一页和第二页的数据,然后用户点击切换的时候,再一页一页加载。改完之后debug时发现,只要组件绑定的data改变了,那么就会触发vue的重新渲染,走马灯又会回到第一页,遂放弃此法。后考虑弃用走马灯组件,使用分页的思想,只加载一页的信息,用户点击切换后,再获取目标页的数据,这样一次只展示一页,大大加快了反应速度。页面上只需要并排展示三个div,然后左右画两个箭头,并在箭头上绑定切换页面事件。每次切换前台传给后台一个页数,后台利用页数来分页查询数据。代码因项目而异,这里就不赘述了。
相关文章推荐
- 使用简单工厂模式出现程序集不能加载的问题的解决方案
- 【转载】使用Imaging组件加载GIF动画
- vue项目优化之按需加载组件-使用webpack require.ensure
- 使用Imaging组件加载GIF动画
- iphone开发之表格组件UITableView的使用(四) 通过加载plist文件展示单组数据
- Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
- Layui table 组件的使用:初始化加载数据、数据刷新表格、传参数
- 关于《创建组件**失败。错误消息为**未能加载文件或程序集**或它的某一个依赖。系统找不到指定文件。》的解决方案
- 加快页面加载速度的解决方案-asp.net使用httphandler打包多CSS或JS文件
- iphone开发之表格组件UITableView的使用(六)通过加载plist文件展示汽车品牌并添加索引查找
- Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js
- android Fresco框架使用与介绍(图片加载组件)
- vue项目优化之按需加载组件-使用webpack require.ensure
- 关于VS2013连接Oracle数据库提示:“尝试加载oracle客户端时引发badimage,如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题”的解决方案。
- vue+elementui1.x tree组件数据太多时加载过慢的解决方案
- 使用JMAIL NET 组件 收取邮件 时 编码出现问题的解决方案
- Servlet.service() for servlet jsp threw exception java.lang.Il在jsp中使用jspsmartupload组件下载文件时将抛出异常的解决方案
- Android高效加载大图、多图解决方案,有效避免程序OOM(使用LruCache 强引缓存图片用取代软引用)
- Web项目中使用XML配置加载Spring及Spring MVC的组件
- 【LruCache完全解析】Android高效加载大图、多图解决方案,有效避免程序OOM (AdapterView使用LruCache图片缓存)