小程序图片懒加载放在服务器,小程序 图片懒加载

小程序静态页面代码

图片{{index}}

App.js

//app.js

App({

onLaunch: function () {

var _this = this;

wx.getSystemInfo({

success: function(res) {

_this.globalData.windowWidth = res.windowWidth;

_this.globalData.windowHeight = res.windowHeight;

},

})

},

globalData: {

userInfo: null,

windowWidth: 0,

windowHeight: 0,

}

})

JS代码

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

img: [

"https://picsum.photos/500/300?image=100",

"https://picsum.photos/500/300?image=101",

"https://picsum.photos/500/300?image=102",

"https://picsum.photos/500/300?image=103",

"https://picsum.photos/500/300?image=104",

"https://picsum.photos/500/300?image=106",

"https://picsum.photos/500/300?image=107",

"https://picsum.photos/500/300?image=108",

"https://picsum.photos/500/300?image=109",

"https://picsum.photos/500/300?image=110",

"https://picsum.photos/500/300?image=111",

"https://picsum.photos/500/300?image=112",

"https://picsum.photos/500/300?image=113",

"https://picsum.photos/500/300?image=114",

"https://picsum.photos/500/300?image=115",

"https://picsum.photos/500/300?image=116",

"https://picsum.photos/500/300?image=117",

"https://picsum.photos/500/300?image=118",

"https://picsum.photos/500/300?image=119",

"https://picsum.photos/500/300?image=120",

"https://picsum.photos/500/300?image=121",

"https://picsum.photos/500/300?image=122",

"https://picsum.photos/500/300?image=123",

"https://picsum.photos/500/300?image=124",

"https://picsum.photos/500/300?image=126",

"https://picsum.photos/500/300?image=127",

"https://picsum.photos/500/300?image=128",

"https://picsum.photos/500/300?image=129"

],

lazyloadArr: [],

lazyloadHeightArr: [],

},

onLoad: function() {

let _this = this;

let _arr = _this.data.lazyloadArr;

let _imgArr = _this.data.img;

_imgArr.forEach(function(item,index) {

_arr.push(false);

})

_this.setData({

lazyloadArr: _arr

})

},

onReady: function () {

let _this = this;

setTimeout(function() {

_this.getRect()

}, 1000)

},

getRect: function() {

var _this = this;

wx.createSelectorQuery().select('.list-item').boundingClientRect(function(rect) {

_this.setData({

itemHeight: rect.height

})

_this.init(rect.height)

}).exec();

},

init: function(itemHeight) {

let _this = this;

let _arr = _this.data.lazyloadArr;

let _arrHeight = _this.data.lazyloadHeightArr;

let index = parseInt(app.globalData.windowHeight / itemHeight);

// 获取未滚动时整屏显示的行数，每行有两个，故 *2 这屏的先加载

for(let i = 0; i < index * 2; i++) {

_arr[i] = true

}

// 遍历每个图片相对于顶部的高度

for(let i = 0; i < _arr.length; i++) {

_arrHeight[i] = Math.floor(i) * (itemHeight + 10)

}

_this.setData({

lazyloadArr: _arr,

lazyloadHeightArr: _arrHeight

})

},

onPageScroll: function(e) {

let _this = this;

let _arrHeight = _this.data.lazyloadHeightArr;

let _arr = _this.data.lazyloadArr;

for(let i = 0; i < _arrHeight.length; i++) {

if(_arrHeight[i] < e.scrollTop + app.globalData.windowHeight) {

if(_arr[i] === false) {

_arr[i] = true;

}

}

}

_this.setData({

lazyloadArr: _arr

})

},

})

如果需要翻页的话：

在调用接口返回成功中写入如下代码

let dataList= res.data.data.dataList;

// 懒加载

let _arr = _this.data.lazyloadArr;

let _arrHeight = _this.data.lazyloadHeightArr;

// 懒加载

dataList.forEach(function(item,index) {

_arr.push(false);

})

let itemHeight = _this.data.itemHeight;

// 遍历每个图片相对于顶部的高度

for(let i = 0; i < _arr.length; i++) {

_arrHeight[i] = Math.floor(i) * (itemHeight + dataList.length)

}

_this.setData({

list: dataList,

lazyloadArr: _arr, // 懒加载数组

lazyloadHeightArr: _arrHeight, // 懒加载高度数组

})