微信小程式——圖片懶載入及其相容方式
阿新 • • 發佈：2019-02-19
一、WXML節點佈局相交狀態(通過微信的API實現懶載入)
節點佈局相交狀態 API 可用於監聽兩個或多個元件節點在佈局位置上的相交狀態。這一組API常常可以用於推斷某些節點是否可以被使用者看見、有多大比例可以被使用者看見。
IntersectionObserver.relativeToViewport(Object margins)
指定頁面顯示區域作為參照區域之一
下面的示例程式碼中，如果目標節點（用選擇器 .target-class 指定）進入顯示區域以下 100px 時，就會觸發回撥函式。
Page({ onLoad: function(){ wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => { res.intersectionRatio // 相交區域佔目標節點的佈局區域的比例 res.intersectionRect // 相交區域 res.intersectionRect.left // 相交區域的左邊界座標 res.intersectionRect.top // 相交區域的上邊界座標 res.intersectionRect.width // 相交區域的寬度 res.intersectionRect.height // 相交區域的高度 }) } })
由此我們可以設定圖片進入可見介面某一區域時的監聽回撥事件，具體程式碼如下（這裡使用了從csdn獲取的的圖片連結，如有侵權請聯絡作者刪除）：
test.js程式碼：
// pages/test/test.js Page({ data: { group: [ { src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" }, { src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg", show: false, def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif" } ] }, onLoad: function () { let group = this.data.group // 獲取原資料 for (let i in group) { // 設定監聽回撥事件，當元素 .loadImg{{i}},進入頁面20px內就觸發回撥事件，設定圖片為真正的圖片，通過show控制 wx.createIntersectionObserver().relativeToViewport({ bottom: 20 }).observe('.loadImg' + i, (ret) => { if (ret.intersectionRatio > 0) { group[i].show = true } this.setData({ // 更新資料 group }) }) } } })
test.wxml
<!--pages/test/test.wxml--> <block wx:for="{{group}}" wx:key="1"> <view class="loadImg loadImg{{index}} {{item.show? 'active' : ''}}" > <image wx:if='{{item.show}}' style='width:100%;height:100%;' src='{{item.src}}'></image> <image wx:else style='width:20%;height:20%;margin:0 auto;margin-top:50%;transform:translateY(-50%);' src='{{item.def}}' mode='aspectFit'></image> </view> </block>
test.wxss
/* pages/test/test.wxss */
.loadImg{
width:100vw;
height:46.3vw;
transition: all .2s ease-in-out;
opacity: 0;
}
.loadImg.active{
opacity: 1
}
二、設定圖片lazy-load值為true實現懶載入（要求最低的庫版本1.5.0）
| lazy-load | Boolean | false | 圖片懶載入。只針對page與scroll-view下的image有效 |
三、設定onPageScroll實現懶載入
以上兩種方式都對小程式庫版本有要求，如果對於低版本的庫就不能使用了，這裡我們採取另外一種方式，雖然也有庫版本要求，但是支援版本 >= 1.4.0，在小程式的page中有個onPageScroll事件，我們可以監聽圖片進入顯示區域來設定回撥事件。
test.wxml和test.wxss不變，改變的是test.js，具體如下：
// pages/test/test.js
// 設定函式防抖
const debounce = (fn, delay=300) => {
let ctx,
args;
let timer = null;
const later = function(){
fn.apply(ctx, args)
timer = null;
}
return function(){
ctx = this
args = arguments;
if(timer){
clearTimeout(timer)
timer = null
}
}
timer = setTimeout(later, delay )
}
Page({
data: {
height: '', // 獲取當前頁面的可視高度
group: [
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
}
]
},
onLoad: function () {
wx.getSystemInfo({ // 獲取頁面可視區域的高度
success: (res) =>{
this.setData({
height: res.screenHeight
})
},
})
this.showImg()
},
onPageScroll:function() { // 呼叫showImg函式
debounce(this.showImg())
},
showImg() { // 判斷高度是否需要載入
// wx.createSelectorQuery()支援的最低庫版本是1.4
// selectAll作用是查詢元素，boundingClientRect獲取元素的相關資訊
wx.createSelectorQuery().selectAll('.loadImg').boundingClientRect((ret) => {
const group = this.data.group // 獲取原資料
const height = this.data.height // 獲取可視區域高度
ret.forEach((item, index) => {
// console.log(item)
// 這裡top值獲取的是元素相對於可視區域左上角(0,0)的垂直座標值,超過(0,0)，top值為負數
// 一旦元素進入可視區域,top值小於可視區域高度height
if (item.top < height) {
group[index].show = true
}
})
this.setData({
group
})
}).exec()
}
})