小程序之图片懒加载处理
2018-03-17 15:25
363 查看
目录(?)[+]微信小程序中,懒加载特效让人头疼不已,因为小程序完全没法操作dom,所以位置的操作在小程序中,变得极其的难~~先看特效:
我们将其拆分为如下几个步骤进行讲解~~
通过上图可以知道,图片位置高度其实可以通过img.height + margin值算出。js代码:
wxml代码:
但是随着往下移动,有些arr[index]的值变为true,所以替换默认图片
js代码:
wxss代码:
源码下载来源:http://blog.csdn.net/sinat_17775997/article/details/54982077
我们将其拆分为如下几个步骤进行讲解~~
1)如何获取图片的位置高度
先看一张图:通过上图可以知道,图片位置高度其实可以通过img.height + margin值算出。js代码:
arrHight[i] = Math.floor(i/2)*(img.height + margin-bottom);为何是Math.floor(i/2)呢,因为同一排两张图片高度一样,比如i=0和i=1,通过Math.floor得出值都为0,所以可以保证同一排的两张图片位置高度是同一个值。
2)替换默认图片
先看效果图片:wxml代码:
<image src="{{arr[index] ? productArr[index].Image : 'default.jpg'}}"></image>思路很明显,一开始arr[index]中都是false,所以默认都是default图片
但是随着往下移动,有些arr[index]的值变为true,所以替换默认图片
js代码:
for (var i = 0; i < this.data.productArr.length; i++) { if (arrHight[i] < scrollTop) { if (arr[i] == false) { arr[i] = true; } } }思路相当清晰,无需多言~~
3)懒加载中渐显特效
先看效果:wxss代码:
.product_image{ opacity: 0; width: 100%; height: 70%; transition: opacity 1s linear 2s; } .loaded{ opacity: 1; }其实就是opacity的一个过渡动画而已,so easy~~
源码下载来源:http://blog.csdn.net/sinat_17775997/article/details/54982077
相关文章推荐
- Android Handler 异步消息处理机制的妙用 创建强大的图片加载类
- Myeclipse java程序中运行图片无法加载并且乱码
- ASP.NET 3.5核心编程学习笔记(44):HTTP处理程序的编写之从数据库加载图像
- 运用BitmapFactory.Options来改善程序加载图片效率和避免内存溢出
- 图片加载错误处理
- 一. Volley简介 Volley的中文翻译为“齐射、并发”,是在2013年的Google大会上发布的一款Android平台网络通信库,具有网络请求的处理、小图片的异步加载和缓存等功能,能够帮助
- 一般处理程序处理图片上传下载
- 微信小程序中使用wxss加载图片并实现动画效果
- Android Bitmap 全面解析(二)加载多张图片的缓存处理 ...
- img加载图片不存在的处理方法
- Android网络图片加载缓存处理库的使用
- asp.net 实现进度条 用来显示加载进度或程序处理进度
- 微信小程序图片的加载
- 真的炸了:让人头痛的小程序之『图片懒加载』终极解决方案
- Android Handler 异步消息处理机制的妙用 创建强大的图片加载类
- Android Bitmap 全面解析(二)加载多张图片的缓存处理
- Android Handler 异步消息处理机制的妙用 创建强大的图片加载类
- ImageLoader加载完成后,对图片进行处理(仿微信发送图片的效果)
- Android开发之图片处理专题(二):利用AsyncTask和回调接口实现图片的异步加载和压缩
- vs2010 Microsoft Visual Studio 无法加载 DLL“UIAutomationCore.dll”: 找不到指定的程序。 (异常来自 HRESULT:0x8007007F) 错误处理方式