小程序由于资源包大小限制,很多图片资源会存放到CND图片服务器上,为了提升交互体验,小程序初始化页面时需要提前加载远程图片资源,方法如下:
1.页面内引入模板:
<import src="../../../components/preload/preload.wxml" />
<template is="preload" data="{{imgLoadList}}"/>
2.页面data
变量imgLoadList
放入需要预加载图片的地址
data: {
imgLoadList: [
'https://lyn.haowanyou.com/WXMP_SHOP_LYN/style/image/luckdraw/photo3-1.png',
'https://lyn.haowanyou.com/WXMP_SHOP_LYN/style/image/luckdraw/photo2-1.png',
]
}
模板(preload.wxml)源码:
<template name="preload">
<image mode="aspectFit" wx:for="{{imgLoadList}}" wx:key="*this" src="{{item}}" data-src="{{ item }}" bindload="_loadImg" binderror="_loadImgError" style="opacity: 0;width: 0; height: 0"></image>
</template>