小程序内存问题--图片懒加载

Jiavan 发布于2019-08-21 11:28 / 764人阅读

摘要：内存不足起因小程序对用户内存使用进行了限制，如果一个页面的图片过多，会导致内存不足的内部错误解决办法对图片进行懒加载，不影响体验的前提下，只渲染当屏的图片，屏外图片，显示缺省图实践分析图片最多的情况就是列表头图或图片列表，为了性能，一般会滚

内存不足起因

小程序对用户内存使用进行了限制，如果一个页面的图片过多，会导致内存不足的内部错误

解决办法

对图片进行懒加载，不影响体验的前提下，只渲染当屏的图片，屏外图片，显示缺省图

实践分析

图片最多的情况就是列表（头图或图片列表），为了性能，一般会滚动加载，而在小程序中，需要借助scroll-view/swiper组件，为了不影响用户体验，就不能让之前以渲染的列表元素失去占位

要判断元素是否在当屏，就要知道一些高度信息（屏幕高，滚动高度，元素高度），但是元素高度在小程序中不能动态获取，所以就需要列表时定高的

代码

wxml文件

计算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个元素的图片

GPU云服务器云服务器 js图片懒加载 js实现数据的懒加载图片小程序加载webrtc 懒加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86751.html

小程序内存问题--图片懒加载

摘要：内存不足起因小程序对用户内存使用进行了限制，如果一个页面的图片过多，会导致内存不足的内部错误解决办法对图片进行懒加载，不影响体验的前提下，只渲染当屏的图片，屏外图片，显示缺省图实践分析图片最多的情况就是列表头图或图片列表，为了性能，一般会滚内存不足起因小程序对用户内存使用进行了限制，如果一个页面的图片过多，会导致内存不足的内部错误解决办法对图片进行懒加载，不影响体验的前提下，只...

zsy888 2019-08-01 16:08 评论0 收藏0
小程序内存问题--图片懒加载

摘要：内存不足起因小程序对用户内存使用进行了限制，如果一个页面的图片过多，会导致内存不足的内部错误解决办法对图片进行懒加载，不影响体验的前提下，只渲染当屏的图片，屏外图片，显示缺省图实践分析图片最多的情况就是列表头图或图片列表，为了性能，一般会滚内存不足起因小程序对用户内存使用进行了限制，如果一个页面的图片过多，会导致内存不足的内部错误解决办法对图片进行懒加载，不影响体验的前提下，只...

Barry_Ng 2019-08-30 13:18 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

Hanks10100 2019-08-20 14:39 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

novo 2019-08-01 16:25 评论0 收藏0