在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度。原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址。那么,在小程序当中呢,最近老大让看一下微信小程序的优化方面,图片是很吃资源的一项,所以我把矛头指向了懒加载:
首先写代码之前一定要理清楚思路,我想的基础是懒加载的思路,首先设立一个数组都为false,让图片的高度和屏幕滚动的高度进行比较,当到达这个点的时候,数组里面对应的false变成true。当数组的false变成true的时候,我们让图片进行显示就可以啦。当然,首先我们需要判断一下首屏能容纳多少个图片,然后把他们显示出来。好,上代码:
.wxml:
1 2 3 4 |
<!--pages/test/test.wxml--> <view> <image wx: for = "{{imgUrls}}" wx:key= "item" src= "{{arry[index] ? imgUrls[index].url: './../../img/index.gif'}}" class = "{{arry[index] ?'Action':''}}" ></image> </view> |
.wxss:
1 2 3 4 5 6 7 8 9 10 11 12 |
/* pages/test/test.wxss */ image { opacity: 0; width: 100%; height: 300px; transition: opacity 0.4s linear 0.4s; } .Action { opacity: 1; } |
.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
Page({ data: { damoHeight: '150' , //demo高度 imgUrls: [ //图片地址 { url: 'http://g.ydbcdn.com/site/imgs/1.png' }, { url: 'http://g.ydbcdn.com/site/imgs/2.png' }, { url: 'http://g.ydbcdn.com/site/imgs/3.png' }, { url: 'http://g.ydbcdn.com/site/imgs/4.png' } ], arry: [ false , false , false , false ], }, onPageScroll: function (res) { var _this = this ; var str = parseInt(res.scrollTop / _this.data.damoHeight); _this.data.arry[str] = true ; _this.setData({ arry: _this.data.arry }) }, onLoad: function () { let _this = this ; let num = Math.ceil(wx.getSystemInfoSync().windowHeight / 300); for ( let i = 0; i < num; i++) { _this.data.arry[i] = true ; }; this .setData({ arry: _this.data.arry }) } }) |
深蓝互联成立于2013年,是一家物联网硬件开发及软件应用服务商,获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年,擅长SaaS 平台开发、APP小程序开发、软硬件结合开发,在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。
我们拥有专业优秀的设计和技术团队,以极具创意的 UI 设计、精湛卓越的开发技术,专业的网络策划团队。公司多年来投入打造物联网SaaS平台,集成了公司研发的多款智能物联网终端(智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等)。
公司一直坚持以研发为导向,打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务!
文章来自深蓝互联http://www.szdbi.com/WEBkaifajishu/296.html转载请注明出处!