[英]How do I prevent my website layout from shifting while loading?
When I load a website that I designed, the layout is wonky for a brief moment while the page loads, then snaps into the correct place. 当我加载我设计的网站时,页面加载时,布局会短暂出现,然后卡入正确的位置。 This behavior occurs in at least Safari and Chrome.
至少在Safari和Chrome中会发生此行为。
How to I keep everything in the proper, final place while the page loads? 页面加载时如何将所有内容保存在正确的最终位置?
HTML in question on codepad (with details changed for privacy reasons): http://codepad.org/GSGHYF0N 键盘上有问题的HTML(出于隐私原因更改了详细信息): http : //codepad.org/GSGHYF0N
Stylesheet: http://codepad.org/Yr4ULwi0 样式表: http : //codepad.org/Yr4ULwi0
<h2>Location</h2>
. <h2>Location</h2>
。 Information on Google Developers have been useful, but haven't indicated how to fix my particular problem. 有关Google Developers的信息非常有用,但是并未指出如何解决我的特定问题。 However, StackOverflow won't let me post these links because of spam-prevention.
但是,由于防止了垃圾邮件,StackOverflow不允许我发布这些链接。
I can't replicate the issue but it could be caused by the webfonts loading and rendering. 我无法复制该问题,但这可能是由webfonts加载和渲染引起的。
That would explain why <h2>Location</h2>
moves - because it's position relies on the width of the <h3>Tagline</h3>
那可以解释为什么
<h2>Location</h2>
移动-因为它的位置取决于<h3>Tagline</h3>
的宽度
You could try using standard system fonts to see if that resolves it. 您可以尝试使用标准系统字体来查看是否可以解决该问题。
Also if you have Dev Tools open that'll slow down page rendering and also disable your cache (if you have that option ticked) 另外,如果您打开了开发工具,这将减慢页面渲染速度并禁用缓存(如果选中了该选项)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.