微信小程序的图片懒加载
在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度。原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址。那么,在小程序当中呢,最近老大让看一下微信小程序的优化方面,图片是很吃资源的一项,所以我把矛头指向了懒加载:
首先写代码之前一定要理清楚思路,我想的基础是懒加载的思路,首先设立一个数组都为false,让图片的高度和屏幕滚动的高度进行比较,当到达这个点的时候,数组里面对应的false变成true。当数组的false变成true的时候,我们让图片进行显示就可以啦。当然,首先我们需要判断一下首屏能容纳多少个图片,然后把他们显示出来。好,上代码:
.wxml:
<!--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:
/* pages/test/test.wxss */ image {
opacity: 0;
width: 100%;
height: 300px;
transition: opacity 0.4s linear 0.4s;
} .Action {
opacity: 1;
}
.js:
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
})
}
})
不会的可以加博主进行一起探究
微信小程序的图片懒加载的更多相关文章
- 微信小程序开发动感十足的加载动画--都在这里!
代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序开发——模板中加载html代码
最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...
- 微信小程地图片未加载成功的情况 Failed to load local image resource
在开发小程序的时候,发现在加载图片时并没有异常,但是后台却报错了. 例如以下我的一段代码: <view class="useage2 "> <image src= ...
- 微信小程序web-view之动态加载html页面
官方推出的web-view方便了很多开发人员. 我们在做的时候,经常会想到写一个小程序的page然后通过动态加载web-view的形式来完成其他功能页面的开发. 之前研究web-view的时候发现网上 ...
- 微信小程序实现滚动分页加载更多
参考网址:https://www.cnblogs.com/Smiled/p/8203306.html 1.wxml: <view class='myScroll' style='float:le ...
- 分享下自己写的一个微信小程序请求远程数据加载到页面的代码
1 思路整理 就是页面加载完毕的时候 请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码 我是改的 onload函数 /** * 生命周期函数--监听页面加载 */ on ...
- JS图片懒加载
简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
- Zepto picLazyLoad Plugin,图片懒加载的Zepto插件
嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
随机推荐
- 【转】【Python】Python多进程与多线程
1.1 multiprocessing multiprocessing是多进程模块,多进程提供了任务并发性,能充分利用多核处理器.避免了GIL(全局解释锁)对资源的影响. 有以下常用类: 类 描述 P ...
- 解决连锁零售行业IT运维管理四大困境
解决连锁零售行业IT运维管理四大困境 中国近年来,连锁零售行业进入了行业的发展高潮,迅速崛起一批大型连锁业态.而随着IT技术的不断进步,连锁零售企业已经步入IT信息化快速发展的重要阶段:在面对激烈 ...
- (笔记)CANOpen移植(CanFestival移植)
在网上下载CanFestival源码最新版本CanFestival-3-884a60cbb83e建立以下文件夹:inc文件夹:放LM3S8962硬件相关以及驱动部分的头文件,adc.h.hw_adc. ...
- SpringBoot系列二:搭建自己的第一个SpringBoot程序
声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 一.根据官网手工搭建(http://projects.spring.io/spring-boot/#quick-start) 1 ...
- Spring系列(一):Spring的基本概念及其核心
一.Spring是什么 Spring是一种多层的J2EE应用程序框架,其核心就是提供一种新的机制管理业务对象及其依赖关系. 二.为什么要使用Spring 1. 降低组件之间的耦合度,实现软件各层之间的 ...
- unity----------------3D模型讲解
图文详解Unity3D中Material的Tiling和Offset是怎么回事 回到顶部(go to top) Tiling和Offset概述 Tiling表示UV坐标的缩放倍数,Offset表示UV ...
- poj1276
题目链接:http://poj.org/problem? id=1276 Cash Machine Time Limit: 1000MS Memory Limit: 10000K Total Su ...
- html 禁用点击事件
1.css禁用鼠标点击事件 .disabled { pointer-events: none; } 注:(这个没有试过) jquery禁用a标签方法1 $(document).ready(functi ...
- Struts2/XWork 安全漏洞及解决办法
exploit-db网站在7月14日爆出了一个Struts2的远程执行任意代码的漏洞. 漏洞名称:Struts2/XWork < 2.2.0 Remote Command Execution V ...
- ★Wireshark基本介绍和学习TCP三次握手
之前写过一篇博客:用 Fiddler 来调试HTTP,HTTPS. 这篇文章介绍另一个好用的抓包工具wireshark, 用来获取网络数据封包,包括http,TCP,UDP,等网络协议包. 记得大学的 ...