|
图片加载的整个过程是这样的，当进入一个页面一般我们是没有图片链接的，所以需要先调用接口获取图片链接，再将图片加载渲染到image上，图片一般采用1.5倍资源图，所以大小都在30kb左右，这样图片加载渲染的时间非常短，可以忽略，但是碰到特殊需求尺寸非常大的图片就不能忽略，因此整个过程是这样的： 进入页面>>获取图片链接>>加载完毕 小图解决方案： 进入页面>>加载本地默认图片>>获取到图片链接>>加载渲染完图片 大图解决方案： 进入页面>>加载本地默认图片>>获取原图及缩略图链接>>加载缩略图（模糊处理）>>加载原图 效果：  大概思路就是这样，实际情况可再处理一些细节 去体验：  代码： js
Page({
data: {
isLoaded:false,
isGetUrl:false,
isLoadedTem:false,
lazyImageOri:"",
lazyImageTem:"",
times:0
},
onLoad: function (options) {
var that = this
var timeId1 = setTimeout(function () {
that.setData({
lazyImageOri:"cloud://normal-en24598/meinv/kisspng-circle-picture-frame-clip-art-squid-ring-frame-5a8bd0bd1674f9.154165811519112381092.png", lazyImageTem:"cloud://normal-e00924598/meinv/kisspng-circle-picture-frame-clip-art-squid-ring-frame-5a8bd0bd1674f9.154165811519112381092副本.jpg",
isGetUrl:true
})
clearTimeout(timeId1)
}, 1000)
},
loadTem() {
var times = this.data.times
times++
this.data.times = times
if (this.data.times%2 == 0){
this.setData({
isLoadedTem: true
})
}
},
loadOri(e){
this.setData({
isLoaded:true
})
}
wxml
|