自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法引入插件,很多插件功能都只能自己写,这就令人尴尬了。比如图片懒加载,在vue里就有vue-lazyload插件,直接一条代码完事了,而这里只能自己写了,好了说正事儿,先看效果:

                                             

        思路是这样的:图片列表展示数据是一个数组,在后台请求回来数据时我们定义一个和图片列表数组长度一样的数组arr,里面的元素都是布尔值false;再定义一个数组arrHeight用于存放每个图片相对于顶部的高度值。通过滚动监听每个图片高度值是否小于滚动条高度,从而改变数值arr里对应的布尔值。然后页面的image组件通过对src设置三目运算来判断是展示默认图片还是实际图片。
        里面涉及到的api我就不详说了,可以去小程序开发文档查具体用法。以下是具体代码:
 
html代码:

js代码:


  

        注:第28行的延时实际上是等待image组件加载图片然后初始化获取单个图片高度,image组件有一个bindload属性,但是这个属性是有一个图片加载就会执行一次,在这里做获取就会获取N次,不利于性能优化; 
            第50行的i/2是因为每行有两张图片,这两张的高度是一样的,所以Math.floor(i
/ 2),加10是我上下图片之间的margin值;
            第57行如果不加上 
app.globalData.windowHeight 那效果就是一滚动加载的不是底部的两张图片而是顶部的两张图片,大家可以试一下效果;
            
在此图片懒加载效果已实现,这里并不是滚动到了某张图片的位置然后向后台请求图片数据再加载出来,其实本质上图片早就已经全部加载了,只是通过滚动到位置再显示,达到懒加载的效果,希望能对你们有所帮助。
 
 
 
        如需转载请注明出处:http://www.cnblogs.com/zishang91/p/8507485.html,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!
 
 
 
 

如何在小程序实现图片lazy-load懒加载效果的更多相关文章

  1. Django lazy load 懒加载 倒序查询

    Django orm默认懒加载   Django orm默认使用的懒加载,即使用的时候才去访问数据库,且每次默认取最少的数据,当然这样有好处也有坏处... 坏处: 会导致频繁的查询数据库,如涉及到外键 ...

  2. 微信小程序小结(4) -- 分包加载及小程序间跳转

    分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...

  3. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  4. 微信小程序下拉刷新和上拉加载

    小程序知识点二 1.上拉加载和下拉刷新 Wxml文件 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true& ...

  5. wepy小程序实现列表分页上拉加载(2)

    第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <temp ...

  6. wepy小程序实现列表分页上拉加载(1)

    使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码 ...

  7. jquery图片懒加载效果

    1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...

  8. 微信小程序 --- 下拉刷新上拉加载

    查看文档看到:page()函数注册页面的时候,有 onPullDownRefresh 监听用户下拉动作,onReachBottom 页面上拉触底事件的函数. 在小程序里,用户顶部下拉是默认禁止的,我们 ...

  9. 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

随机推荐

  1. 洛谷 P1892 团伙

    P1892 团伙 并查集 #include<cstdio> int fa[2500];//fa[i]表示i的朋友所在集合,fa[i+n]表示i的敌人所在集合 bool boo[2500]; ...

  2. Mysql查询语句的 where子句、group by子句、having子句、order by子句、limit子句

    Mysql的各个查询语句 一.where子句   语法:select *|字段列表 from 表名 where 表达式.where子句后面往往配合MySQL运算符一起使用(做条件判断) 作用:通过限定 ...

  3. Android APK加壳技术方案

    Android APK加壳技术方案[1] Android APK加壳技术方案[2]

  4. B. Code For 1 一个类似于线段树的东西

    http://codeforces.com/contest/768/problem/B 我的做法是,观察到,只有是x % 2的情况下,才有可能出现0 其他的,都是1来的,所以开始的ans应该是R - ...

  5. DNS正、反向解析+负载均衡+智能DNS+密钥认证

    主机名 IP 软件包 系统版本 内核版本 实验环境 master 192.168.30.130 bind.x86_64 32:9.8.2-0.17.rc1.el6_4.6 bind-chroot.x8 ...

  6. Oozie的作用

    Oozie的作用: 1.统一调度hadoop系统中常见的mr任务启动. hdfs操作. shell调度. hive操作等 2.使得复杂的依赖关系.时间触发.事件触发使用xml语言进行表达,开发效率提高 ...

  7. 解决Eclipse自动补全变量名的问题

    原文地址: https://blog.csdn.net/czh500/article/details/53162157

  8. TFS2010升级至TFS2013完全指南(更换服务器)

    一.背景:         公司已使用tfs2010很长时间,目前随着公司的发展,项目越来越少,而产品越来越多,采用的开发模式,也逐渐从瀑布式.迭代式转向敏捷开发.为了更好的支持产品研发,决定将tfs ...

  9. Java格式规范及注释的用法

    /* 需求:演示一个Hello World的Java小程序 思路: 1.定义一个类.因为Java程序都是定义在类中,Java程序都是以类的形式存在的,类的形式其实就是字节码的最终体现 2.定义一个主函 ...

  10. qt5 上传图片到http服务器

    转载请注明出处:http://www.cnblogs.com/dachen408/p/8185060.html qt5 上传图片到http服务器,亲测可以用,qt5.8+vs2015,直接上码; 头文 ...