【小程序】使用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>
相关资料
请发表评论