Cause of low memory

The applet limits the user's memory usage. If there are too many pictures on a page, it will lead to an internal error of insufficient memory

Solution

Lazy loading of pictures does not affect the experience. Only the pictures on the screen, pictures off the screen, and default pictures are displayed

Practice analysis

1. The most common case of pictures is the list (header or picture list). In order to achieve performance, it usually scrolls. In an applet, you need to use the scroll view / swiper component. In order not to affect the user experience, you cannot let the previously rendered list elements lose their space

2. To determine whether an element is on the current screen, you need to know some height information (screen height, scrolling height, element height), but the element height cannot be obtained dynamically in the applet, so you need to set the height in the list

Code

wxml file

    <!--
        showIndex Is the index value of the first list element in the current screen
        scrollLoad Rolling loading
        scrollHide Picture rendering on screen
    -->
    
    <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>

The method to calculate showIndex can be used as a public method

    /**
     * offetHeight  Roll calculated part to top distance
     * scrollTop   Rolling height
     * height      Height of each module
     * colunm      Column number
    **/
    
    function countIndex (offetHight, scrollTop, height, colunm) {
        // Obtaining the screen width ratio of a single example
        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 file

    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
            })
        }
    })

The specific number of elements to be rendered depends on your own. Here it is not added to countIndex for calculation. For example, {{showindex + 24 > Index & & showindex - 6 < index} in wxml will render pictures of 30 elements