防止网站在加载时跳转

Prevent Website from Jumping on Load

本文关键字：加载 网站      更新时间：2023-09-26

>我这里有一个网站： https://lfc2015.ca/发生的情况是页面将显示，然后在加载主图像/js时跳转。我尝试过预加载器，但我真的不喜欢它减慢整个网站的速度。我也尝试通过首先让它显示纯色来预加载图像（就像这个 http://www.mayneislandcamping.com/），但是，同样的问题仍然存在。即使是纯色也会像那样跳跃。我在想是否有办法告诉浏览器div的高度以防止跳跃？或者我对其他答案持开放态度。多谢。

据我所知，问题是元素直到脚本触发后才被调整大小。这是因为它的高度是由脚本而不是 CSS 决定的。

我正在分享我的想法，

您可以创建一个与整个网站重叠的div

  .overlay
  {
       position:fixed;
       width:100%;
       height:100%;
       overflow-x:hidden;
       overflow-y:hidden;
       z-index:1000;
  }
  <div class="overlay"><!-- DISPLAY A ANIMATED GIF OR LOADING TEXT--></div>

这个div 将是加载到您的页面中的第一件事。

一段时间后，使用 setTimeout（） 以优雅的方式隐藏div [淡出幻灯片动画] 具有很酷的后期预加载效果。

希望对您有所帮助！

相关文章：