【小程序】使用uni-app搭建小程序环境---图片懒加载
属性：
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| src | String | 图片资源地址 | ||
| mode | String | \'scaleToFill\' | 图片裁剪、缩放的模式 | |
| lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | 微信小程序、5+APP、百度小程序、头条小程序 |
| @error | HandleEvent | 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: \'something wrong\'} | ||
| @load | HandleEvent | 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:\'图片高度px\', width:\'图片宽度px\'} |
注意事项
<image>组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度src仅支持相对路径、绝对路径，支持 base64 码；- 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置
image{will-change: transform},可优化此问题。 - 自定义组件里面使用
<image>时，若src使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。 - webp格式的图片，app-vue下，iOS不支持，Android支持；app-nvue下，iOS和Android均支持。app-vue下也支持gif。
应用
<image lazy-load :src="item.img ? item.img : defaultImg.course" />
自定义懒加载
<template> <view> <view class="uni-padding-wrap"> <view class="uni-helllo-text" style="padding:30upx 0;"> 延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处： <text>\n加快页面渲染速度</text> <text>\n提升页面滚动性能</text> <text>\n默认不下载屏幕外的图片，减少网络流量</text> </view> </view> <view class="uni-list"> <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index"> <view class="uni-media-list"> <view class="uni-media-list-logo"> <image class="image" :class="{lazy:!item.show}" :data-index="index" @load="imageLoad" :src="item.show?item.src:\'\'" /> <image class="image placeholder" :class="{loaded:item.loaded}" :src="placeholderSrc" /> </view> <view class="uni-media-list-body"> <view class="uni-media-list-text-top">主标题</view> <view class="uni-media-list-text-bottom uni-ellipsis">列表二级标题</view> </view> </view> </view> </view> </view> </template> <script> export default { data() { var imgs = [\'shuijiao\', \'muwu\', \'cbd\'] var list = [] for (let i = 0; i < 20; i++) { list.push({ src: `https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/${imgs[i%3]}.jpg`, show: false, loaded: false }) } return { windowHeight: 0, placeholderSrc: \'/static/kechengfengmianmorentu.png\', list: list, show: false } }, methods: { load() { uni.createSelectorQuery().selectAll(\'.lazy\').boundingClientRect((images) => { images.forEach((image, index) => { if (image.top <= this.windowHeight) { this.list[image.dataset.index].show = true; } }) }).exec() }, imageLoad(e) { this.list[e.target.dataset.index].loaded = true } }, onLoad() { this.windowHeight = uni.getSystemInfoSync().windowHeight }, onShow() { if (!this.show) { this.show = true setTimeout(() => { this.load() }, 100) } }, onPageScroll() { this.load() } } </script> <style> .placeholder { opacity: 1; transition: opacity 0.4s linear; } .placeholder.loaded { opacity: 0; } .uni-media-list-logo { position: relative; } .uni-media-list-logo .image { position: absolute; } </style>
相关资料
请发表评论