移动端加载页面出现抖动、未加载完成时布局杂乱问题解决

最新推荐文章于 2023-08-21 17:03:13 发布

原创最新推荐文章于 2023-08-21 17:03:13 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

样式专栏收录该内容

5 篇文章

订阅专栏

探讨了页面加载过程中图片从无到有导致的抖动问题，分析了其产生的原因，即图片加载速度不一致导致页面元素重排，影响用户体验。提出了使用padding-bottom属性和背景色来预占位，避免页面内容重排，提升页面加载的流畅性和美观性。

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

一般出现在页面加载时图片从无到有的过程中，有抖动感

可以这样解释，我们手机在不同的环境下网速不同从而导致页面加载速度有快有慢

这个时候图片所在的盒子是靠图片撑开的

图片没有加载出来，盒子无法被撑开，页面其他已加载的内容就会填充上去

等待图片加载完后，填充上去的内容又被重新挤下来

这就很容易显得页面杂乱，抖动感明显，用户体验差

可以这样解决

.wrapper
    overflow:hidden
    height:0
    padding-bottom:***
    /*background-color:#eee*/

通过padding-bottom撑开盒子，解决这一问题

也可以给容器加一个灰色背景，图片未加载出来时显示一块可见区域，而不是一块空白，看起来会好很多

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小雨繁星儿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS 控制因Html页面高度导致抖动的问题解决方法

09-25

这种抖动通常是因为页面的尺寸和布局在加载时动态调整所导致的，尤其是当页面高度由内容动态决定时，滚动条的出现和消失会直接影响布局，造成页面抖动。为了解决这个问题，我们可以采取一些CSS控制方法来稳定页面的...

移动端如何用下拉刷新的方式实现上拉加载

10-17

同时，为了避免页面抖动，可以使用CSS的`transform`属性来平滑地改变内容区域的位置。总结一下，实现移动端的下拉刷新和上拉加载主要涉及以下步骤： 1. 创建HTML结构，设置好样式以支持滚动。 2. 使用JavaScript...

参与评论您还未登录，请先登录后发表或查看评论

图片加载速度慢导致的页面布局抖动——解决方法

weixin_44066534的博客

08-28

2598

页面加载完成前后为什么会出现抖动？页面加载时之所以会出现抖动现象，是因为在没有设置img的width,height属性值的情况下，浏览器无法获取图像的尺寸，也就无法为图像保留合适的空间，因此当我们刷新页面时，页面中的图像在加载完成前后的布局发生了变化，因此视觉上产生了页面抖动的现象。解决方法1——设定图像宽高的具体值为图像指定 height 和 width 属性，设置了这些属性，就可以在页面加载时为图像预留空间。提示：不要通过 height 和 width 属性来缩放图像。如果通过 height

记一次简单的防止页面加载过程中的抖动

weixin_41604040的博客

11-21

762

记一次简单的页面防抖今天在做项目的时候遇到一个问题：一个很简单的页面，但是有一个问题：如果网速比较慢，比如说我在Chrome里模拟3G网：那么在图片加载的过程中，用户会感觉到明显的抖动，为了解决这个问题，可以在图片的外层加一个wrapper来占位： <div class="wrapper"> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide> <img

解决 h5网页+移动端+使用键盘页面闪动问题

lyqQ147258369的博客

03-27

760

/使用键盘让页面尺寸发生变化，所以监听该事件，把初始化的尺寸给到现在的页面。//记录刚开始渲染完成的尺寸。

Vue项目里的首页面中出现晃动的情况，可能是以下问题导致：

最新发布

Dileyea的博客

08-21

1656

Vue项目里的首页面中出现晃动，可能是与样式、数据加载延迟、页面布局有关

【HTML5移动端开发】[rem + 百分比布局] 加载抖动（高度不一致）解的决方法

qq_31381917的博客

11-07

6950

解决移动端rem+百分比布局加载瞬间页面错乱的方法以下的内容和观点未经大牛级别验证，有错误的地方请大牛留言指教~！ 移动端布局有很多种，这里我最常使用到 rem+ 百分比的布局方式（高度/字体设置rem单位，宽度设置百分比）来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。页面在

jquery.messager.js插件导致页面抖动的解决方法

10-27

然而，在实际应用中，可能会遇到一个常见的问题，即在使用该插件时，页面出现抖动或闪烁的现象，这极大地影响了用户体验。本文将详细讲解如何解决由jquery.messager.js插件引发的页面抖动问题。首先，我们要理解...

CSS 控制Html页面高度导致抖动问题的原因

12-13

在CSS中添加如下代码：复制代码代码如下: html,body{ overflow-y:... min-height:101%;...} 已经试验过了，是可以执行的。由此可以得出结论：这类由高度导致页面抖动的问题，其实究其根本原因是滚动条是否显示导致的。

网页加载时左右跳动原因分析及解决方法

09-22

在这个过程中，如果元素的宽度、高度或者位置依赖于未加载的资源（如图片或字体），浏览器可能会先按初始值计算布局，待资源加载完成后重新调整，从而造成页面抖动。 2. **浏览器滚动条**：正如描述中提到的，网页...

uniapp web-view组件之html页面中控件样式渲染延迟导致视觉效果差的问题

D_lunar的博客

12-02

2284

hybird中的html页面引用了移动端 Vue 组件库，页面进入时，组件样式渲染延时，视觉效果很差。解决办法： 1、vant的组件，初始化页面时，不显示。 <div ref="vant_Container" id="vant_Container" style="display: none;"> …… </div> 2、Vue挂载时，仅在整个视图都被渲染之后再显示。 mounted() { this.$nextTick(function() { .

布局抖动的元凶及如何避免

Jackshijin的博客

02-26

1453

改变一个元素的特性或者修改其内容有时不仅影响该元素，有时候会导致级联的变化，可能影响该元素的子节点、兄弟节点、父节点的改变，所以每次进行修改时，浏览器都必须重新计算这些改变的影响，但是重新计算布局的代价十分昂贵，浏览器必须尽可能少或者延缓布局的工作。但是如果我们编写的代码不能让浏览器有足够的时间和空间来进行优化，强制浏览器执行大量重新计算，就会造成布局抖动，这是造成布局抖动的元凶。因为我们进行一系...

uniapp小程序如何进行性能优化

weixin_63929524的博客

03-11

3160

uniapp小程序如何进行性能优化

uniapp开发h5页面实现图片预加载功能

热门推荐

HouGISer的博客

01-24

1万+

背景 h5页面，很多时候存在大量的图片、动画，这些都需要下载大量的静态资源，如果我们直接打开页面，会发现部分图片正在加载或者还未下载的现象，严重影响体验效果。为了解决这个问题，我们需要进行图片预加载的操作。什么是图片预加载？简单来说，图片预加载就是在页面渲染前把所有的图片、GIF等静态资源全部下载完毕，使得页面渲染后直接打开缓存的图片资源，从而减少卡顿的问题，优化用户体验。那么如何在h5中...

跨平台应用开发进阶(二十八) ：资源加载速度优化解决方案

IT全栈华强工作室

07-09

3122

开发APP实现上架后，后续面临一系列优化工作事项，其中，动态图片加载慢就是亟需解决的用户体验差问题。图片加载过程为：从文件开始下载至下载完成，通过控制台看耗时6s！只是一张普通的图片，居然耗时如此长时间，不可思议。当然，网络资源下载要同时考虑文件大小及设备网速带宽等因素。优化事项：对于比较固定的动态资源，建议走本地缓存，若发现本地缓存与服务端返回资源ID不同，代表资源已更新，则需要同步更新本地缓存并做前端资源同步更新展示。若服务端返回的资源ID与本地缓存一致，则表明服务端资源更新，前端直接读取本地缓存做

rem加百分比 移动端加载瞬间错乱解决方案

qq_38179746的博客

11-24

432

h5页面在手机端浏览时，会闪一下错乱的页面，然后才加载完整，让用户看着特不舒服。解决方案也简单 1.JS加载顺序与加载方法 body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好 function resize() { var htmlEle = document.documentElement; ...

关于h5移动端常见问题整理

wh_xmy的博客

09-21

3063

移动端开发要考虑最多的就是兼容性的问题，android和ios的兼容，css3新增属性的兼容以及h5新增标签等使用问题。下面是一些小问题以及解决方案，仅供参考。【1】.关于样式的总结 1.移动端开发页面会左右晃动，这时候我们需要给外层容器加上overflow-x：hidden。 2.遮罩层下面的内容依然会滑动，这时候我们可以把所有相关事件都...

h5页面打开时有页面没有样式的瞬间

maohuihua的专栏

01-02

3003

h5页面打开时有页面没有样式的瞬间，非常难看。这是因为我打包时，将js和css文件打在一个文件里面导致的。后续打包分开，并且将js文件放在下面就好了。页面中没有设置宽高的DIV中的文字大小不能控制，有时大，有时小。这时设置max-length=9999px就好

Vue页面 - 大型图片加载慢解决途径

CodingmanNAN的博客

01-25

6615

1. 两个内外尺寸一致的盒子，外层放置压缩图，内层放置高清图，高清图加载完成后铺盖压缩图即可; 2. 在不同阶段使用不同图片资源

移动端解决fixed滚动出现抖动的问题

05-02

在移动端，当使用fixed定位元素时，滚动页面会出现抖动的问题。这是由于移动设备的浏览器在滚动时会对fixed元素重新定位，从而导致抖动。为了解决这个问题，可以采用以下几种方法： 1. 使用CSS属性-webkit-overflow-scrolling:touch，设置overflow元素为scroll或auto，并为其父元素设置该属性。这可以让页面在滚动时平滑滑动，同时固定元素不会抖动。 2. 使用position:sticky，而不是fixed，对于支持sticky的浏览器，它会在页面滚动时保持元素的位置，并且不会产生抖动。 3. 使用JavaScript，通过监听滚动事件，在滚动时实时更新固定元素的位置，从而避免抖动。综上所述，以上方法都可用于解决移动端fixed元素滚动出现抖动的问题，具体应该根据实际情况选择最适合的方法。