小程序內存問題--圖片懶加載

Jiavan 發布于2019-08-21 11:28 / 765人閱讀

摘要：內存不足起因小程序對用戶內存使用進行了限制，如果一個頁面的圖片過多，會導致內存不足的內部錯誤解決辦法對圖片進行懶加載，不影響體驗的前提下，只渲染當屏的圖片，屏外圖片，顯示缺省圖實踐分析圖片最多的情況就是列表頭圖或圖片列表，為了性能，一般會滾

內存不足起因

小程序對用戶內存使用進行了限制，如果一個頁面的圖片過多，會導致內存不足的內部錯誤

解決辦法

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

實踐分析

圖片最多的情況就是列表（頭圖或圖片列表），為了性能，一般會滾動加載，而在小程序中，需要借助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 懶加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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