小程式記憶體問題–圖片懶載入

不二發表於2019-02-16
記憶體

記憶體不足起因

小程式對使用者記憶體使用進行了限制，如果一個頁面的圖片過多，會導致記憶體不足的內部錯誤

解決辦法

對圖片進行懶載入，不影響體驗的前提下，只渲染當屏的圖片，屏外圖片，顯示預設圖

實踐分析

  1. 圖片最多的情況就是列表（頭圖或圖片列表），為了效能，一般會滾動載入，而在小程式中，需要藉助scroll-view/swiper元件，為了不影響使用者體驗，就不能讓之前以渲染的列表元素失去佔位

  2. 要判斷元素是否在當屏，就要知道一些高度資訊（螢幕高，滾動高度，元素高度），但是元素高度在小程式中不能動態獲取，所以就需要列表時定高的

程式碼

wxml檔案

    <!--
        showIndex為當屏中首列表元素的索引值
        scrollLoad滾動載入
        scrollHide圖片當屏渲染
    -->
    
    <scroll-view wx:if="{{isNet}}" scroll-y="true"
        bindscrolltolower="scrollLoad" bindscroll="scrollHide">
    
        <view wx:if="{{total}}">
            <block wx:for="{{imgDatas}}">
                <view>
                    <image wx:if="{{showIndex + 24 > index && showIndex - 6 < index}}" src="{{item.pic.url}}" mode="aspectFill"></image>
                </view>
            </block>
        </view>
    
    </scroll-view>

計算showIndex的方法，可作為公用方法


    /**
     * offetHeight  滾動計算部分到頂部距離
     * scrollTop   滾動高度
     * height      每個模組的高度
     * colunm      列數
    **/
    
    function countIndex (offetHight, scrollTop, height, colunm) {
        // 單例獲取螢幕寬度比
        if (!countIndex.pix) {
            try {
              let res = wx.getSystemInfoSync()
              countIndex.pix = res.windowWidth / 375
            } catch (e) {
              countIndex.pix = 1
            }
        }
        let scroll = scrollTop - offetHight * countIndex.pix
        let hei = height * countIndex.pix
        return scroll > 0 ? Math.floor(scroll / hei) * colunm : 0
    }

js檔案

    let wxTools = require(`../../untils/wxTools.js`)
    
    Page({
        data: {
            scrollData: {
                offetHeight: 15, // px
                height: 80, // px
                colunm: 3
            },
            showIndex: 0
        },
        scrollHide (e) {
            let data = [
                this.data.scrollData.offetHeight,
                e.detail.scrollTop,
                this.data.scrollData.height,
                this.data.scrollData.colunm
            ]
            
            let index = wxTools.countIndex(...data)
    
            this.setData({
                showIndex: index
            })
        }
    })

具體要渲染多少的元素，自己來定，這裡沒有放到countIndex中加入計算，例如wxml中的{{showIndex + 24 > index && showIndex – 6 < index}}，會渲染30個元素的圖片

相關文章