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

本文主要是介绍uniapp如何解决JS更换背景闪动的问题Appa，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

更换背景图闪动主要的图片没有预先加载，如果只关心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把背景切换在一张图上面，定位的话你的很多代码要改，强烈推荐，第一种方法最简单，但是有问题，进入其他页面再回来又会有问题了，还有什么方法可留言一块讨论

这篇关于uniapp如何解决JS更换背景闪动的问题Appa的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---