图片资源的加载对于小程序整体性能的影响还是比较大的，这里总结下项目中对图片资源加载做的几点优化 图片格式 使用 SVG / webp 格式图片，可以有效降低资源大小和加载耗时。 ... ...
|
需注意 图片大小本地的图片资源可以压缩一下上传。 很多场景下，图片真实尺寸会超出实际展示尺寸很多，如果使用了 这一逻辑可以封装成 // axml <import-sjs from="./index.sjs" name="test" /> <image style="{{width: 200rpx; height: 200rpx}}" src="{{test.processImg(src, 200, 200)}}" /> // sjs export default { processImg(src, width, height) { return `${src}?x-oss-process=image/resize,h_${height},w_${width}`; }, }; 图片懒加载部分页面可能包含很多图片资源，而进入页面一次性加载所有的图片资源，会降低页面的加载速度。 对于大部分场景而言只需要加载当前可视区域内的图片资源，对可视区域外的图片延迟加载。
// 通过以上两种方式，在合适的时机设置 visible 值，从而延迟加载图片资源 <image src="{{visible ? 'xxx.png' : 'placeholder.png'}}" /> 目前小程序原生支持懒加载，通过设置 // example <image src="xxx.png" lazy-load /> 使用这种方式需要注意几点：
// axml <button onTap="toggle">togglebutton> <view a:if="{{visible}}" class="block" /> <image src="xxx.png" lazy-load /> // acss .block { height: 100vh; } // js Page({ data: { visible: true, }, toggle() { this.setData({ visible: !this.data.visible, }); }, }); 图片预加载对比懒加载对应的延迟加载而言，预加载则是提前加载。如果预先知道小程序中哪些图片资源需要加载，我们可以在合适的时机提前加载这些图片资源。这样当图片展示时，就不需要等待图片加载。 例如可以在弹窗显示前加载弹窗内图片，提升用户体验。在当前页面加载其它页面图片资源，降低其它页面的加载时长。 使用这种方式需要注意几点：
可以将图片预加载功能封装成自定义组件使用 // axml <view a:if="{{preload}}" style="display: none"> <imgae a:for="{{imgs}}" src="{{item}}" onLoad="loadImg" /> view> // js Component({ props: { preload: false, // 选择合适的时机预加载 imgs: [], }, methods: { loadImg() { // 在这里可以判断图片是否全部加载完毕、触发回调等 } }, }); |
