首页 > 其他分享 >vue通过style切换背景图片,出现闪屏现象

vue通过style切换背景图片,出现闪屏现象

时间:2023-08-07 15:24:20浏览次数:36  
标签:style vue 通过 闪屏 现象 背景图片

1.情况:通过监控swiper的index修改背景图片,出现闪屏情况

 2.解决:尝试过多种方法例如v-clock,提前定义路径变量等都无法解决问题,最终使用提前定义好类名,通过修改类名动态更改类解决,在浏览器网络中可发现只请求过一次,不再是滑动时每次重新请求图片,因此不会出现闪屏现象

 

标签:style,vue,通过,闪屏,现象,背景图片
From: https://www.cnblogs.com/LylePark/p/17611539.html

相关文章

  • vue图片压缩插件
    图片压缩插件1.安装插件npmijs-image-compressor2.引入importImageCompressorfrom'js-image-compressor'3.使用compressionImage(file){returnnewPromise((resolve,reject)=>{//eslint-disable-next-lineno-newnewImageCom......
  • node14 升级 node16 后 vue2 项目中 sass 报错问题
    起因不知道因为个什么手贱把之前的node14版本卸载了去官网重新下载安装了一下node,最近版本升级到了node16,以为应该不会有什么问题吧,结果把项目一跑,我勒个去,一堆飘红的,看控制台提示主要是这个node-sass报的错。  #卸载npmuninstallnode-sasssass-loader#重新安......
  • vue可拖拽悬浮按钮组件
    效果预览预览地址:http://120.79.163.94/JYeontuComponents/#/JHoverBtnView关键代码实现阻止默认拖动选择事件preventEvent(){ document.getElementById('j-hover-btn').ondragstart=function(){ returnfalse; }; document.getElementById('j-hover-btn').onselectstart......
  • 语音合成技术3:HierVST: Hierarchical Adaptive Zero-shot Voice Style Transfer
    HierVST:分层自适应零样本语音风格转换摘要:尽管语音风格转换(VST)领域取得了快速进展,但最近的零样本VST系统仍然缺乏将新的说话者的语音风格进行转换的能力。在本文中,我们提出了HierVST,这是一个分层自适应的端到端零样本VST模型。在没有任何文本转录的情况下,我们仅利用语音数据集......
  • vue报错 Multiple assets emit different content to the same filename index.html
    vue-cli版本:@vue/[email protected]报错现象:想把css和script全部内嵌到html文件中,就用了"HtmlInlineScriptPlugin"插件,打包后js代码被嵌到了head里,导致代码提前执行找不到#app,再配置HtmlWebpackPlugin插件通过inject:"body"指定代码内嵌到body,打包报错"Multipleassetsemitdiff......
  • Vue的升级与降级命令
    vue2.0–>3.0npmuninstallvue-cli-g(全局卸载vue2.0)npminstall@vue/cli-g(全局安装vue3.0)npminstall@vue/cli-init-g(如果还想使用vue2.0可以安装这个桥接工具)vueinitwebpack(2.0创建项目)vuecreatedemo(项目名称)(3.0创建项目)vue3.0->2.0npmuninstal......
  • vue中axios多次相同请求取消上一个请求
    apiimportaxiosfrom'axios';exportfunctiongetDataFlowGraph(id,that){returnrequest({requestBase,url:`/workflowMetadata/getDataFlowGraph/${id}`,method:'get',//设置canceltoken用于多次请求,中断上一次请求cancel......
  • Vue中 全局限制输入特殊字符
    传送门:Vue实现自定义指令(directive)及应用场景背景:开发中遇到的表单输入,常常会限制特殊字符的输入以满足安全性测试的要求。1.单独处理每个文本框<template><el-inputv-model="content"placeholder="请输入"@change="vaidateEmoji"></el-input></template......
  • 拖拽宫格vue-grid-layout详细应用及案例
    目录1、前言2、安装3、属性4、事件5、占位符样式修改6、案例1、前言vue-grid-layout是一个适用于vue的拖拽栅格布局库,功能齐全,适用于拖拽+高度/宽度自由调节的布局需求。本文将讲述一些常用参数和事件,以及做一个同步拖拽的Demo。效果动态图如下:2、安装vue2版本:npminstall......
  • 前端 Vue 应该知道的一些东西,个人笔记 2021-11-26
    前端代码编写规范及es6常用语法命名规范文件夹名称,文件名称,组件名称,统一使用大驼峰或者小横线方式命名;组件文件名:list-item.vue.或者ListItem.vue;基础的无状态的通用组件加VBaseApp前缀BaseButtonAppButton在html中<base-button>或者<BaseButton>url路径名:小......