场景:较大的图片加载很慢,会出现较长时间的白屏,体验感差。
文章来源:https://www.toymoban.com/news/detail-511663.html
解决方案:一进入页面,图片未加载成功前,进行loading…;图片加载完成后会触发@load事件;文章来源地址https://www.toymoban.com/news/detail-511663.html
<template>
<view class="">
<image @load="loadImg($event)" src="../static/image.jpg" mode="widthFix" />
</view>
</template>
<script>
export default {
data () {
return {
}
},
onShow () {
//开启加载
uni.showLoading({
title: '加载中...',
mask: true
})
},
methods: {
// 此方法会在图片加载完成后触发
loadImg (e) {
uni.hideLoading()
console.log('图片信息', e)
},
},
}
</script>
<style>
</style>
到了这里,关于uni-app小程序加载图片优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!