大屏项目:背景图片切换出现闪屏情况

1.情况:做大屏时,swiper切换时背景图片要切换,因背景图片过大,过快切换会出现屏幕闪白情况

2.解决:通过设置切换时,行内样式切换背景图片,使用异步的方法来解决屏幕切换白屏问题

复制代码
// vue2实现
<template> <div class="background" :style="{ backgroundImage: `url(${backgroundImage})` }"></div> <button @click="changeBackground">切换背景</button> </template> <script> export default { data() { return { backgroundImage: '', newBackgroundImage: '/path/to/new/image.jpg', // 新的背景图片路径 }; }, methods: { preloadImage(src) { return new Promise((resolve) => { const img = new Image(); img.onload = () => resolve(src); img.src = src; }); }, async changeBackground() { // 预加载新的背景图片 await this.preloadImage(this.newBackgroundImage); // 设置新的背景图片 this.backgroundImage = this.newBackgroundImage; }, }, }; </script> <style> .background { width: 100%; height: 100%; background-size: cover; background-position: center; } </style>
复制代码
复制代码
// vue3实现方法
<template> <div class="large-screen-body" :style="largeScreenStyle"> <div class="panel-header-wrap"> <div class="title-wrap"> <div class="logo-wrap"> <img class="logo-item" src="/static/img/logo.png" alt="" /> </div> <div class="line"></div> <div class="logo-title">{{ panelTitle }}</div> </div> </div> <div class="panel-body-wrap" :style="panelBodyWrapStyle"> <Swiper class="main-swiper-wrap" :modules="modules" :pagination="true" :autoplay="{ delay: 100 }" @slideChange="panelChange" > <SwiperSlide> <FirstPanel /> </SwiperSlide> <SwiperSlide> <SecondPanel /> </SwiperSlide> </Swiper> </div> </div> </template> <script setup> import { ref, computed, useCssModule, provide, onMounted } from 'vue' import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件 import { Pagination } from 'swiper/modules' // 分页器 import { panelRootKey } from '@/utils/keys.js' import { getScale, designHeight } from '@/utils/getScale.js' import FirstPanel from './first/index.vue' import SecondPanel from './second/index.vue' const backUrl = { // 1.定义图片路径 0: '/static/img/knowledge_bg.png', 1: '/static/img/hight_level_bg.png' } useCssModule() const modules = [Pagination] // data let panelIndex = ref(0) // 当前屏幕的位置 let backgroundImage = ref('/static/img/knowledge_bg.png') // 2.设置双向绑定默认图片路径 provide(panelRootKey, ref(panelIndex)) const preloadImage = (src) => { // 3. 编写切换时异步方法 return new Promise((resolve) => { const img = new Image() img.onload = () => resolve(src) img.src = src }) } const largeScreenStyle = computed(() => { return { 'background-image': `url(${backgroundImage.value})`, // 6.行内样式使用实际背景图片路径 transform: `scale(${getScale()[0]}, ${getScale()[1]}) translateX(-50%)`, height: `${designHeight}px`, width: `${getScale()[2]}px` } }) const panelBodyWrapStyle = computed(() => { return { height: `${designHeight - 96}px` } }) const panelTitle = computed(() => { let title = `` if (panelIndex.value === 0) { title = '知识产权数字图谱' } else if (panelIndex.value === 1) { title = '高价值专利分析图谱' } return title }) // 面板变化 const panelChange = async (v) => { panelIndex.value = v.activeIndex await preloadImage(backUrl[panelIndex.value]) // 4.切换时调用异步方法 backgroundImage.value = backUrl[panelIndex.value] // 5.更换实际图片路径 } </script>
复制代码

 

posted on   ChoZ  阅读(509)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
· 用 C# 插值字符串处理器写一个 sscanf

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示