uniapp如何解决JS更换背景闪动的问题Appa

3 篇文章 0 订阅

更换背景图闪动主要的图片没有预先加载,如果只关心H5此方法可解决

这里是一个轮播图的更改更换背景图的,主要代码可以参考, 可以根据自己的需求来更改

currentSwiper(value) {
                // console.log(value)
                console.log(value.detail.current)
                const bgcImgspre = new Image();//new一个image实例
                bgcImgspre.src = this.getGreats[value.detail.current].bgcimg;赋值src属性,调用实例的onload方法
                bgcImgspre.onload = ()=> {//这里改用箭头函数,普通函数会改变this指向
                    this.bgimgs = bgcImgspre.src
                    this.$forceUpdate()//强制刷新
                };            
            } 

注:以上方法不适用于App端,如果你要同时解决H5和app端有两种方法可以解决闪动的问题

1:标签加上一个渲染图片的标签,隐藏它,这样图片就相当于预加载了,再调用的时候就轻而易举了

<image v-show="false" :src="itemGreat.bgcimg" mode=""></image>

2:使用雪碧图(精灵图),定位解决背景切换的问题

这种就需要UI把背景切换在一张图上面,定位的话你的很多代码要改,强烈推荐,第一种方法最简单,但是有问题,进入其他页面再回来又会有问题了,还有什么方法可留言一块讨论

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值