小程式記憶體問題--圖片懶載入
記憶體不足起因
小程式對使用者記憶體使用進行了限制,如果一個頁面的圖片過多,會導致記憶體不足的內部錯誤
解決辦法
對圖片進行懶載入,不影響體驗的前提下,只渲染當屏的圖片,屏外圖片,顯示預設圖
實踐分析
圖片最多的情況就是列表(頭圖或圖片列表),為了效能,一般會滾動載入,而在小程式中,需要藉助scroll-view/swiper元件,為了不影響使用者體驗,就不能讓之前以渲染的列表元素失去佔位
要判斷元素是否在當屏,就要知道一些高度資訊(螢幕高,滾動高度,元素高度),但是元素高度在小程式中不能動態獲取,所以就需要列表時定高的
程式碼
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個元素的圖片
相關推薦
微信小程式實現圖片懶載入的懶辦法(思路參考)
微信小程式中,由於沒有辦法實現DEMO操作,位置的操作在小程式中很難進行,所以要實現圖片的懶載入是真的難啊(簡直操碎了心~~)!!! 懶載入的實現無非就那幾個辦法,說白了就是按需載入、監聽滾動條載入、延時載入。。。 說明:此方法只適用於有明確統一高度的圖片排
微信小程式的圖片預載入處理
一、常規的頁面處理的時候,我們可以使用多種方式處理圖片預載入,但是這些方法在小程式中似乎就沒有 那麼好用了,所以,我們可以使用圖片的回撥函式進行圖片的預載入處理; 二、微信小程式的第一種情況是: 現在有A ,B 兩個頁面 在B 頁面中有 10
微信小程式分頁懶載入
程式碼示例data: { baseUrl: getApp().data.baseUrl, // 介面基路徑 caseData: [], currentPage: 1, // 設定載入的
小程式記憶體問題--圖片懶載入
記憶體不足起因小程式對使用者記憶體使用進行了限制,如果一個頁面的圖片過多,會導致記憶體不足的內部錯誤解決辦法對圖片進行懶載入,不影響體驗的前提下,只渲染當屏的圖片,屏外圖片,顯示預設圖實踐分析圖片最多的情況就是列表(頭圖或圖片列表),為了效能,一般會滾動載入,而在小程式中,需
小程式圖片懶載入
Page({ data:{ // text:"這是一個頁面" hidden: false,
微信小程式 - 圖片懶載入
wxml <!-- 資料來源 --> <view class='item-{{index}}' wx:for="{{lazyData}}" wx:key="*this.src"> <image src='{{item.show?
真的炸了:讓人頭痛的小程式之『圖片懶載入』終極解決方案
轉載:請寫明原文連結及作者名 ‘小小小’ 小程式真的會取代一切?QQ群:139128168 ← 點選加群 微信小程式中,懶載入特效讓人頭疼不已,因為小程式完全沒法操作dom,所以位置的操作在小程式中,變得極其的難~~ 先看特效: 我們將其拆分為如
小程式之『圖片懶載入』終極解決方案
微信小程式中,懶載入特效讓人頭疼不已,因為小程式完全沒法操作dom,所以位置的操作在小程式中,變得極其的難~~先看特效:圖片懶載入我們將其拆分為如下幾個步驟進行講解~~1)如何獲取圖片的位置高度先看一張圖:圖片位置高度通過上圖可以知道,圖片位置高度其實可以通過img.heig
微信小程式——圖片懶載入及其相容方式
一、WXML節點佈局相交狀態(通過微信的API實現懶載入) 節點佈局相交狀態 API 可用於監聽兩個或多個元件節點在佈局位置上的相交狀態。這一組API常常可以用於推斷某些節點是否可以被使用者看見、有多大比例可以被使用者看見。 Intersectio
微信小程式image圖片載入完成監聽
需求 在應用中顯示的圖片很多情況不滿足業務需求,我們需要動態根據圖片的寬高進行縮放或載入中顯示的預設圖片,這是我沒就需要監聽圖片載入完成回撥,來看看微信小程式怎麼實現圖片載入完成回撥。實現 1. 繫結回撥 通過image標籤的bindload屬性繫結圖片載入完成
佔位圖和圖片懶載入專案實戰詳解
佔位圖(兜底圖): 真實圖片太大還沒有載入完之前先用一張佔位圖表示這個位置將來會有圖片或者說明這個位置是有圖片的但是不知道什麼原因真正的圖片沒有加載出來使用者只能看到這張佔位圖; 什麼是圖片懶載入: 懶載入也就是延遲載入,當訪問一個頁面的時候,先把img元素渲染出來,但是不給它真
小程式中圖片上傳
前端小程式:wxml <!--huitianxia/view/attend/attend/attend.wxml--> <import src="/huitianxia/view/common/foot.wxml"/> <view class='wrappe
【小程式】分頁載入資料,下拉載入更多,上拉重新整理
【 小程式】分頁載入資料,下拉載入更多,上拉重新整理 分頁載入的優點就不多說了,下面主要記錄一下幾個問題點。 scroll-view元件不能用在頁面根佈局中,不然觸發不了系統的onPullDownRefresh()、onReachBottom()回撥。 在Page頁
vue 圖片懶載入 vue-lazyload
圖片懶載入 在實際的專案開發中,我們通常會遇見這樣的場景:一個頁面有很多圖片,而首屏出現的圖片大概就一兩張,那麼我們還要一次性把所有圖片都加載出來嗎?顯然這是愚蠢的,不僅影響頁面渲染速度,還浪費頻寬。這也就是們通常所說的首屏載入,技術上現實其中要用的技術就是圖片懶載入--到可視區域再載入。 vue中經常使
做圖片懶載入的步驟
1、百度搜索v-lazy-npm 開啟首頁,然後在windows的cmd裡輸入npm install vue-lazyload --save (下載圖片懶載入的外掛) 2、複製下面程式碼到 main.js中 (注①:將有註釋刪掉的那句刪掉)(注②:粗體的那一句話、loading代表載入中的意
微信小程式 base64 圖片 canvas 畫布 drawImage 實現
在微信小程式中 canvas drawImage API 傳入的第一個引數是 imageResource 圖片資源路徑,這個引數通常由從相簿選擇圖片 wx.chooseImage 或 wx.getImageInfo 獲取圖片資訊來獲得。 而 base64 格式圖片資料,無法被 getImageIn
小程式實現上拉載入,例項程式碼
小程式實現上拉載入,例項程式碼 最近在做一個小程式,想實現下拉重新整理的功能,剛開始就遇到了一個尷尬的問題,原因是不認真o(╥﹏╥)o 下面是通過摸索總結出的步驟,給尋找問題的同伴提供參考: 下拉重新整理分為全域性和單頁面的: 全域性的設定就是在 app.js 中的 Windows
原生JS的(可視區域,向上滾動向下滾動兩種)圖片懶載入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
基於Jquery的(可視區域,向上滾動向下滾動兩種)圖片懶載入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
Android 分享微信小程式之圖片優化
小菜上週接入了微信分享小程式的入口,基本功能實現都沒問題,有需要的朋友可以瞭解一下 Android 分享微信小程式失敗二三事,雖然功能都正常,但整體測試發現圖片展示效果不佳。於是小菜整理了一個簡單的小方法處理一下圖片!