小程序之上拉加载照片以及图片加载延迟解决之道

说在前面

最近由于项目需要所以学了下小程序，也做了一些东西，随后便有了以下的一些总结了，现在说说在小程序中如何进行上拉加载照片和进行懒加载。

---

问题描述

无论是app还是小程序，加载图片多的时候都会出现图片加载缓慢和流量耗费多的问题。而我在小程序中的解决方案是上拉加载和进行“变相懒加载”。

---

老规矩，以源码为导向讲解上拉加载

---

photos.wxml

    <scroll-view class="scroll" style="height:{{clientHeight}}px;" scroll-y="true" bindscrolltolower="loadMore" >
        //放置图片的代码
    </scroll-view>

源码解读：这里只需要关注bindscrolltolower函数即可，它意思是上拉的时候触发的函数，而这里触发的函数是loadMore。

photos.js

loadMore: function(e){
this.showLoading('正在加载图片中');
var that = this;
currentPage++;
wx.request({
        url: baseUrl  +'pictureController/getPicturesByAid',
        data: {
            pictureAid: albumId,
            pageSize: pageSize,
            currentPage : currentPage
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            console.log(res);
            if(res.data.result.length!=0)
            {
                array = array.concat(res.data.result)
                that.setData({
                    array : array
                })
            }
            else
            {
                that.showToast('已加载完全部图片!');
            }
        },
        complete: function(res){
            that.hideLoading();
        }
    })
}

源码解读：js函数中的一些参数和函数我都去掉了，留下这个loadMore函数，这个函数的作用是用pageSize和currentPage做分页参数传递到后台加载新的数据，然后将得到的数据res.data.result利用concat函数连接在array之后，array函数的作用是存放之前已经加载过来的数据，连接新数据结束后再用一次setData即可！

---

现在看看我是如何巧用变相懒加载的

---

做过项目的都知道，图片的懒加载其实就是在图片还没有加载成功的时候出现一张默认的图片，这样可以不至于图片还没有加载成功的时候出现一大推空白的地方，我也是因为做项目出现这种情况之后才开始研究如何避开这种情况，大家可以看一下的源码：

<scroll-view class="scroll" style="height:{{clientHeight}}px;" scroll-y="true" bindscrolltolower="loadMore" >
<view class="function" style="background-image:url({{cryUrl}})" wx:for="{{array}}" wx:for-item="item">
    <image src="{{imageBaseUrl+item.pictureAid+'/'+item.pictureName}}" style="height:95%;width:95%;margin:3px auto;" bindtap="selectPhotos" id="{{imageBaseUrl+item.pictureAid+'/'+item.pictureName}}&{{item.pictureUploadtime}}"/>
</view> 
</scroll-view>

源码解读：这个就是从服务器获取图片数据成功之后循环排列图片的源码，重点在于style="background-image:url({{cryUrl}})" 里边是在图片还没有加载成功之前显示的一个div的背景图片，而就是这个背景图片避开了图标没加载成功之前空白的尴尬。

---

Note:发布的这些文章全都是自己边学边总结的，难免有纰漏，如果发现有不足的地方，希望可以指出来，一起学习咯，么么哒。
开源爱好者，相信开源的力量必将改变世界:
** osc :** https://git.oschina.net/xi_fan
github: https://github.com/wiatingpub