html动态加载页面，页面出现左右闪动的原因

最新推荐文章于 2023-08-25 14:55:29 发布
最新推荐文章于 2023-08-25 14:55:29 发布
阅读量3.1k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/g_soledad/article/details/88585414
本文分析了在使用load或ajax动态加载HTML到页面时出现的闪动现象，并提供了两种解决方案：预设div高度以保持滚动条一致性和固定div相对于浏览器窗口的位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题：在使用 load 或者 ajax 动态加载html的到页面时，会左右闪动一下

分析：经过测试，这种情况出现在html的页面高度变化出现纵向滚动条时。例如，原始div高度为900px，动态加载页面（1000px）过来，到加载完成。加载过程 div高度的变化过程为：900px -> 0px -> 1000px, 滚动条变化：有->无->有 ，滚动条变化是到导致闪动的元凶。

解决：1. 预设div的高度，使其一直出现滚动条；2. 定死div相对于浏览器窗口位置；

           

html数字跳动加载,js实现数字跳动到指定数字
weixin_28842269的博客
06-09 1365
本文实例为大家分享了js实现数字跳动到指定数字的具体代码，供大家参考，具体内容如下运行结果如下：js实现数字跳动到指定数字h1 {font-size: 150px;text-align:center;}p {text-align:center;}button {font-size:40px;}0开始计数/** startNum 代表要跳动的初始数字* targetNum 代表要跳动到的数字* ti...
两个div叠加触发事件发生闪烁问题的解决方法
09-24
下面小编就为大家带来一篇两个div叠加触发事件发生闪烁问题的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html页面使用load()方法加载另一个页面时，页面代码出现闪现
HAISHANDELEI的博客
06-26 2469
在html中要在当前页面加载另一个页面的数据，可以通过load()方法来加载，例: $("div").load("text.txt"); 但是使用load()方法会出现一个问题，页面加载时会出现js源代码闪现，此时可以使用ajax的同步获取来加载页面,然后将获取的值显示在页面，例如上面的代码可以修改为: var html = $.ajax({url:"text.txt" , async:false}); $("div").html(html.responseText); 此时页面加载不会出现代码闪
Html页面窗口闪烁的一种常见原因--高度、宽度调整
一把菜刀行江湖
03-18 9125
　　　在Html页面中经常会出现select元素，如果给select元素塞入的数据和我们指定给select元素所占用显示空间的高度和宽度有所差异的话，在某些情况下，例如和菜单Div相配合的复杂页面窗口系统中，页面会出现抖动、闪烁现象。　　 究其原因，大多在ie自动计算出来的区域覆盖(高度、宽度)和程序员指定的区域覆盖(高度、宽度)存在一些“较大”差异，在某些情况下页面刷新时，会因为此间存在一个
进入、刷新html页面出现闪动
darkCloudss的博客
07-12 2577
原因：html界面有宽高没定死。解决办法：直接把宽高定死
html页面写完之后，发现下方滚动条可以向右拉动，一拉出现大片空白页面。
GiScript的博客
02-14 1万+
在网上找了一个办法解决了这个问题，让页面是充满屏幕， 消除了下方的滚动条，很简单的一行代码。   html{     width:100%;    overflow-x:hidden;}；
vue页面加载闪烁问题的解决方法
08-27
vue 页面加载进度条组件可以让用户在加载页面的时候不会对着完全空白的页面发呆，提升用户体验。但是，从开发角度讲，这种进度条在真实性上确实很难把握，因为在逻辑代码加载完成之前，我们都不能统计到进度，而逻辑...
vue页面加载图片比文字慢导致位置闪动
12-05
在Vue项目中，页面加载图片比文字慢导致位置闪动的问题通常是由于图片加载时间较长，导致页面布局在图片加载完成前后发生变化。以下是一些解决方法： 1. **预加载图片**：在页面加载之前预先加载图片，确保图片在...
用PHP实现Web页面无闪动刷新.pdf
01-06
【标题】: "用PHP实现Web页面无闪动刷新" 【描述】: 本文主要讨论如何利用PHP技术来实现Web页面的无闪动刷新，从而提高...由于减少了不必要的页面跳转，不仅可以提高页面加载速度，还能减少服务器负载，提高系统效率。
vue页面加载多个组件无外层高度导致位置闪动
最新发布
12-05
在Vue项目中，当页面加载多个组件且没有设置外层高度时，可能会导致页面内容在加载过程中出现闪动现象。这种情况通常是由于浏览器在加载内容时，页面高度会动态变化，从而引发布局的重排和重绘，导致视觉上的闪动。 ...
因为滚动条，当出现弹出框时，页面会左右晃动一下的解决方案
Masha
11-20 1961
height:100%
html出现滚动条页面闪动,css解决滚动条出现造成页面晃动的问题
weixin_39907157的博客
06-03 3423
窗体默认是没有滚动条的，而HTML的内容是自上而下加载，就会发生一开始没有滚动条，后来突然出现滚动条，此时页面的可用宽度发生变化，水平方向的内容会发生晃动，尤其是水平居中显示的内容，出现滚动条后会重新计算。解决方法：一、简单的做法是html {overflow-y: scroll;}当页面注定要出现滚动条的话，可以用此方法，让滚动条从一开始就显示出来，即使内容一屏能展示也会出现滚动条，这里有点不优...
html5动态加载数据页面闪,html5 – 如何修复iframe页面重新加载时的chrome闪烁
weixin_29144259的博客
06-03 793
@ user247245：从你的问题来看,你并不完全清楚你(想)如何使用iframe.它会定期重新加载,还是整个网页加载一次？解决方案1：不同的背景颜色如果你只是想避免丑陋的白色,并避免过度复杂.在framecontents.html文件的HTML标头中设置不同的背景颜色,如下所示：这样,当CSS文件加载,解析和应用时,背景不是#fff.解决方案2：透明iframe虽然没有内容,但iframe应该...
解决因出现滚动条导致页面抖动
热门推荐
Rey
08-24 1万+
现在大多数页面都是采用主体内容水平居中布局<body> <div></div> </body>div{ width:1200px; margin:0 auto; }但是，这种布局存在一个问题。现在的浏览器滚动条默认是overflow:auto类型的，也就是说如果内容高度不足一屏，没有滚动条；如果超出才会出现滚动条。于是，问题来了：信息流页...
网页load完成以后，会整体抖动一下(闪一下)
soledadLz的专栏
08-31 1649
今天解了一个问题：   某些情况下，网页load完成以后，会闪一下。后来发现，这种情况发生在那种load完成后会晚上滚动的网页上(例如m.baidu.com)。 比较了一下代码，发现问题出在截屏上。 onpagefinish后，为了得到当前网页的截屏，需要调
html页面显示动态效应,打开网页为什么会有闪屏现象？特别是动态网页！（网络搜集）...
weixin_36455339的博客
06-03 435
建议你修复一下系统，如果故障依旧，请重新安装显卡驱动。修复一下系统试试1、开机按F8不动到高级选项出现在松手，选“最近一次的正确配置”回车修复。2、如果故障依旧，请你用系统自带的系统还原，还原到你没有出现这次故障的时候修复(如果正常模式恢复失败，请开机按F8进入到安全模式中使用系统还原)。3、如果故障依旧，使用系统盘修复，打开命令提示符输入SFC/SCANNOW回车(SFC和/之间有一个空格)，插...
纯CSS解决滚动条显示和消失时导致页面抖动的问题
weixin_59232910的博客
08-25 2288
我在使用 ElementPlus 时发现，弹出对话框界面后，界面右边的滚动条会消失，进而导致 body 变宽，使整个页面发生抖动。我先在网上搜索有没有合适的办法，但找到的方法都不太适合我的情况。我找到了如下所示的 css，但是对我的页面来说，会挡住顶部导航栏右边的头像。100vw - 100% 计算的是滚动条的宽度。100vw 是浏览器窗口宽度（包括滚动条），100% 是网页宽度（不包括滚动条）。所以这两个值相减，就可以得到滚动条的宽度。使用上面的css的效果是这样的。
marquee实现文字移动效果;js+div实现文字无缝移动效果
weixin_30245867的博客
11-30 200
1.marquee实现文字移动： <marquee width="220px;" scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()" > <p style="letter-spacing:2px;width: 1px;"> 欢迎您登录拜...
Html 页面刷新后出现闪动
weixin_30437847的博客
06-25 3218
Html 页面刷新后，或跳转后，出现闪动，抖动问题 1.查看有没有用到新字体，新字体链接位置是否存在 如： 1 @font-face { 2 font-family: "AvantGarde-Demi"; 3 src: url("fonts/avantgardedemi.ttf") format("truetype"), 4 url("fonts/avantgardedemi....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值