html刷新和加载页面时出现闪烁

最新推荐文章于 2024-06-17 16:53:23 发布
最新推荐文章于 2024-06-17 16:53:23 发布
阅读量2.8w 收藏 16
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang__k/article/details/82463305
版权

 vue  html刷新和加载页面时出现闪烁如下图,然后才会出现渲染好的页面:

不要慌, 使用v-cloak可以解决这个问题:

那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，

1.在html中添加

<head>
       <link rel="stylesheet" type="text/css" href="../static/libs/iview/css/ionicons.css">
    <style>
        [v-cloak] {
          display: none ;
        }
      </style>
</head>
<body>
        <div id="hr" v-cloak>
        ...
        </div>
<script type="text/javascript" src="./../static/js/url.js"></script>
<body>
</html>

2.在css中添加

[v-cloak] {
  display: none;
}
 <div id="hr" v-cloak>
        ...
        </div>

这样就可以避免闪烁了.

但有时候也会不起作用,v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级,所以使用如下就OK:

 [v-cloak] {
          display: none !important;
        }

 

sunny.day
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
html刷新和加载页面时出现闪烁,vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）...
weixin_32141627的博客
06-04 1331
在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如{{value.name}}在加载的时候会看到{{value.name}}在页面出现，过了几秒之后才会渲染数据，在vue中有个指令可以解决这个问题，v-cloak那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，{{val...
Ajax实现无闪烁定时刷新页面实例代码
12-01
在Web开发中我们经常需要实现定时刷新某个页面： 1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录)； 2.实现实时站内短信； 3.定时更新页面数据等等。但是我们在网上搜搜会发现有很多定时刷新页面的方法，最简单的就是在<head></head>标记之间加上如下代码： 在<head></head>标记之间加上代码，实现定时刷新，此代码我已经测试过，可以实现效果 <meta http-equiv=”refresh” content=”5″ URL=”Example.aspx” /> 说明：content的值代表页面刷新的间隔时间，以秒为单位 URL的值指定
html刷新不闪烁,css div固定不闪烁
weixin_26736139的博客
06-10 935
css div固定不闪烁css3可以设置元素滑动到一定距离固定在顶部，主要通过以下几个css样式实现，不需要js，没有闪烁现象。position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: sticky;top: 0;z-index: 666;适用于移动端和PC端position:sticky这是css定...
网页图片刷新闪烁解决办法
12-30 823
近日， 修改公司设备的应用固件， 发现视频以图片刷新方式显示的时候在IE下会闪烁。 经查阅资料， 修改后不再闪烁，附上代码 1 <script> 2 function onloadImage() 3 { 4 var bufferImage = new Image(); 5 bufferImage.src = "这里...
HTML页面定时刷新指南
最新发布
一起coding，一起嗨。
06-17 670
HTML页面定时刷新指南
html加载svg时闪烁解决,html – 预加载所有使用的内联svg图像？
weixin_42333370的博客
06-07 645
我的Web应用程序使用直接嵌入在我的css样式表中的内联svg图像.在运行时我不知道的不同类中有多个图像.目前,svg-images在首次使用时被加载到浏览器缓存中,这会导致短暂的闪烁.有没有办法告诉浏览器他应该在显示之前将这些内联svgs加载到浏览器缓存中？例如,当显示对话框时,我有一个模糊的svg图像来创建模糊的背景：.blur {-webkit-filter: blur(2px);-ms-f...
html怎么才能让动画不闪,如何让html5动画流畅？
weixin_39842519的博客
06-07 121
我为我的动画使用canvas和webkitrequestAnimation框架.. 但是，动画是瞬间的，并不光滑..它是如此之快，我看不到任何动画.. 如何使动画平滑？如何让html5动画流畅？Wave 2window.onload = function() {var canvas = document.getElementById('canvas'),context = canvas.getCo...
html加载时页面闪烁白色背景,解决页面加载闪白问题-背景图片加载优化
weixin_33324435的博客
06-03 4175
页面加载闪白今天遇到一个问题，写了一个使用深色背景图的网页，发现访问/刷新时，会出现短暂的闪白现象。之前使用浅色背景时没有发现过这个问题，搜索半天也没有找到特别直白有效的回答。找到的几个答案，有说预加载的，有说降低背景图片的分辨率的，使用js加载背景的。试过之后感觉效果都不理想。后来又重新观察了一下闪白的情况，发现每次都是页面的后半段闪烁，才发现问题的关键不在代码，而在图片图片加载的两种方式：Ba...
前端不闪屏刷新页面
qq_35469342的博客
03-03 1023
前几天同事问了我一个问题，就是他登录和退出写成了一个悬浮在右侧的小组件，登录之后变成用户名和个人中心，退出之后变成登录。但是数据是存在store的，每次退出想清空数据，并刷新数据。这时候，我首先就想到了，直接利用浏览器的就可以解决问题，但是这个方法有一个弊端，就是它会闪屏，并且不会保证其他的组件keep-alive。在经过了面向百度编程之后，发现了一个比较优的解决办法，今天记录一下。
vue刷新页面时去闪烁提升用户体验效果的实现方法
10-17
在Vue.js应用中，用户界面的闪烁问题通常发生在页面加载时，组件未能及时渲染而显示原始HTML结构。这种闪烁现象会影响用户体验，特别是当应用需要处理大量数据或进行复杂计算时更为明显。Vue提供了多种策略来解决这...
vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）
12-29
在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如 <p>{{value.name}} 在加载的时候会看到 {{value.name}} 在页面出现，过了几秒之后才会渲染数据，在vue中有个指令可以解决这个问题，v-cloak 那么，v-...
HTML5页面无缝闪开的问题及解决方案
11-20
在传统的 web 优化中，我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小，也能通过离线包、页面直出等方案加速 html 返回，之前一篇h5 秒开大全有部分简析。在大部分场景中，这些方案都足够用，也能得到出色的效果。但仍有两种无法尽善尽美的地方：其一是短暂的白屏现象不可避免，其二是对于超大型 web 应用难以做到秒开。结合客户端特性，我们有没有办法，进一步做到极致，打开 web 页面和打开客户端页面无差异的体验呢？ 传统方案的困境 无论是 html 离线，还是直出，以及让 webview 启动和网络请求并行 ，页面的切换和打开都无法避免 html 加载这一过程。对于大型应用而言，庞大的
ajax 实现网页无闪自动局部刷新
09-28
实现网页无闪自动局部刷新，通过异步传输XMLHTTP发送参数到ajaxServlet，返回符合条件的XML文档
无闪烁更新网页内容JS实现
12-10
无闪烁更新网页的课题比较大。 加载的html字符串（通过ajax获取的），如果还需要运行代码，那么肯定有问题。 希望用一个不显示的iframe来承载这个对象。这有点dirty work的感觉。 最终解决方案是 代码如下:var str2...
html5刷新不闪烁,重绘画布html5没有闪烁
weixin_34987986的博客
06-07 356
我的屏幕每25ms重绘一次，图像闪烁，这是我的代码var FRAME_RATE = 40;var intervalTime = 1000/FRAME_RATE;gameLoop();function gameLoop(){context.clearRect(0, 0, 640, 640);renderMap();window.setTimeout(gameLoop, intervalTime);}...
html5移动端加载闪屏解决办法
07-16 4239
html5移动端加载闪屏解决办法，其实很简单，给加一个加载过程动画效果就可以了，这样就不会出现闪屏效果，看起来与APP效果基本上是一样的了。 在<body>的下面加一个DIV层 <div class="Loading"></div> 然后我们在公用的CSS代码中加入以下代码，其中loader.gif是一个加载动画，这个可以用简单点的，百度一下“...
JQuery使用hide()方法后 刷新网页元素会闪一下解决方法
cxrshiz7890的博客
02-03 2862
解决方法 长话短说，元素会闪现是因为jq控制了元素的隐藏（hide方法），但js加载有延迟，导致元素不能马上隐藏，会显现一下。 只要在元素加载的过程隐藏就不会出现这个问题，即在需要隐藏的HTML标签中添加hidden属性： <div id="curtain" hidden></div> 这样子刷新后就不会闪现了。 修改前 比如在一个页面中添加了一个固定在浏览器中心position:absolute的div，平常的时候需要它隐藏，只有触发特定事件才会显现。例子： $("#curtai
#{}不自动改参数类型_如何在不刷新页面的情况下改变URL
weixin_39622655的博客
10-25 146
本文为饥人谷原创文章，首发于 前端学习指南。问没有具体业务场景的技术问题都是耍流氓，那在回答这个问题之前先简单介绍一下业务场景。 下午6点半，小 H写了一个下午的代码揉揉眼睛伸个懒腰，「今天终于能早点回去了，先刷会知乎歇会」。突然，产品 小U一脸淫笑飘了过来，小 H 略感不妙。 『嗨嗨~ 你这工作状态不饱和啊，有个小需求来看看~。现在需要做一个新闻展示页，主功能区块分为新闻列表和分页两部分。...
html刷新页面不闪烁
05-25
要让页面在刷新时不出现闪烁，可以使用以下方法： 1. 在<head>标签中添加meta标签： ```html <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)"> <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)"> ``` 这样可以使页面在刷新时产生淡入淡出的效果，减少闪烁。 2. 使用CSS的transition属性： ```html <style> body { opacity: 0; transition: opacity 0.2s ease-in-out; } body.loaded { opacity: 1; } </style> <body onload="document.body.classList.add('loaded')"> ``` 这样可以在页面加载完成后再显示页面，通过CSS的渐变效果实现不闪烁的效果。 3. 使用JavaScript的setTimeout方法： ```html <script> setTimeout(function() { location.reload(); }, 200); </script> ``` 这样可以在刷新页面前延迟一段时间，让页面先隐藏起来，再刷新页面，达到减少闪烁的效果。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值