导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-03-24 22:23
@粽叶加米:也不一定是根据知道的事实,感觉有时候就像人做梦一样创造了一个现实。
粽叶加米
2025-03-24 21:34
还是本质上的区别,一个是事实呈现,一个是根据知道的事实去编造。
广树管理员
2025-03-24 20:04
@MAO:好像网上有好多说法
广树管理员
2025-03-24 20:04
@Chise Hachiroku:呀,拍得双手都冻坏了
广树管理员
2025-03-24 20:03
@Jeffer.Z:现在最可怕的事情莫过于不断吹嘘AI有多厉害,却不怎么提及胡编乱造的缺点
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩1个月
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
界之轨迹
暂无评分
PS5界之轨迹
2024年9月28日 14时 ~ 攻略中
已累计游玩5个月27天
导力之父爱普斯泰因预言的世界末日即将到来,此时东大陆共和国所研发的导力火箭划破天空,即将探访这个世界的边界。 与此同时万事屋的青年们,正聚集在奥雷德自治州,与集结而来的各方势力,一同看望着这科技奇点。 人们这次是否能认识到世界的真实呢?
PSN奖杯卡

PSN奖杯卡

赞助商广告

解决并记录因为加载顺序导致flex布局出现画面抖动的笔记

作者:广树时间:2024-07-15 14:35:19分类:博客开发

最近在浏览维基萌的时候发现了一个因为加载顺序导致的flex布局抖动现象,想着挺有意思的就记录一下解决思路和方案。


现象

image-9iu2c3ve.png

有时候在浏览维基萌的时候偶尔会一瞬间出现上图的布局。


image-xh7puj05.png

然后一晃而过恢复成了正常布局。

这个现象只有打包发布到服务器上才会出现,本地调试则复现不出来。


分析原因

起初怀疑右侧侧边栏的内容可能引发BUG。于是清空了右侧侧边栏,只保留一个空框架,但问题依旧存在。

后来思考为什么问题只在发布到服务器上时出现,而且复现问题时右侧侧边栏似乎消失了。这联想到可能与网速有关。

于是,在本地调试环境中通过限制浏览器流量成功复现了问题,这样问题就更容易解决了。

经过一番分析,找到了问题的根源。首先,维基萌的PC界面采用三栏布局,通过flex固定左侧菜单和右侧侧边栏的宽度,中间内容部分则分配剩余空间。HTML的加载是自上而下的,当由于网络原因导致页面加载较慢时,有可能在下载到中间内容部分时,右侧侧边栏尚未下载完毕,中间内容部分就先显示出来了。

基于flex布局的设定,由于右侧侧边栏暂时不存在,中间内容部分会占用所有剩余空间。随后,右侧侧边栏加载进来,就会造成界面短暂的抖动。


解决办法

解决办法也很简单,flex布局还有一个order的属性。

CSS中的order属性用于控制灵活盒子布局(flexbox)中的项目顺序。通过设置order属性,可以改变flex容器中的子元素在布局中的排列顺序,而不需要改变HTML的顺序。

首先将原本的HTML顺序从【菜单->内容->侧边栏】改成【菜单->侧边栏->内容】。

然后再通过order属性,指定三个元素的顺序为【菜单->内容->侧边栏】即可。

具体到CSS为:

.blog-layout-body {
  /* 前略 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.blog-layout-left-body {
  /* 前略 */
  order: 0;
}
.blog-layout-content-body {
  /* 前略 */
  order: 1;
}
.blog-layout-right-body {
  /* 前略 */
  order: 2;
}

其中【justify-content: space-between】指定两端对齐,可以防止在【内容】没加载时,【菜单】和【侧边栏】出现布局的抖动。

通过以上修改就可以让对应的元素在加载前和加载后都固定在一个位置,从而防止页面的抖动。

donate.png

1210 x 50(蓝底).png

cloudcone

相似内容:
推文
支持投票功能的0.27.1版本的维基萌博客系统发布啦! 这次更新主要是增加了投票功能,并修复了深色模式缺失的一些样式。 详见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.27.1
发表于:2025-03-15 14:54
推文
支持深色模式的0.26.0版本的维基萌博客系统发布啦! 除深色模式,还新增了电影记录功能和评论排序功能,是一个新功能增加比较多的版本。 详见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.26.0 追记:发布后发现还有挺多遗漏的地方,请更新0.26.1版本。 https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.26.1
发表于:2025-03-08 19:18
推文
维基萌博客系统发布了0.25.0版本啦! 本次更新主要重构了追番、游戏、书籍的筛选功能,筛选变得更加精细了。并在侧边栏加了当季追番、阅读中、攻略中三个新模块。 以及修复了一些陈年老BUG和前面版本为了优化产生的新BUG😂。 具体更新内容详见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.25.0
发表于:2025-03-01 11:59
推文
综合大佬报告的一些问题,得出了苹果safari默认的视频进度条UI的一些特性(BUG?)。 1.在拖动进度条时,会受到各类Move事件影响,也就是说把视频放在幻灯片或者灯箱中后在safari上是很难操作进度条的。Chrome、Edge、Firefox都没有这个情况。 2.拖动进度条会触发onpause事件,这个在Firefox也有一样的情况,只不过可以通过video.seeking来判断这个暂停事件是由于拖动进度条导致的还是按了暂停按钮,但是safari这招并不行。 有点难搞,真要为了safari开发一套视频UI吗?😅
发表于:2024-06-30 22:06
推文
博客系统积攒了一波更新,推了一个新版本,具体更新内容可以在github上查看:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.18.1 话说我最近才知道原来loli.net这个用来镜像的域名已经不大好使了,反而谷歌的fonts.googleapis.com域名好使了?
发表于:2024-06-30 11:27
推文
博客新增了阅读记录的功能,至此ACGN的记录和活动记录功能全部完成啦! 同时,增加了文章底部插入相关作品的功能和在博文中查看活动详情的功能,算是功能闭环了👏。 新增的阅读页面地址:https://www.wikimoe.com/page/books
发表于:2024-04-04 20:42
推文
博客新增【活动】页面,可以通过这个页面查看我比较在意的活动信息时间线,方便安排出行游玩计划👏。 https://www.wikimoe.com/page/event
发表于:2024-03-26 18:19
推文
博客新功能,游戏记录页面公开! https://www.wikimoe.com/page/games
发表于:2024-03-14 18:11