Question

我在这里有一个网站：https://lfc2015.ca/会发生什么，页面会显示，然后在加载主图像/ js时跳转。我试过一个预加载器，但我真的不喜欢它如何减慢整个网站的速度。我也尝试通过首先显示纯色来预加载图像（例如http://www.mayneislandcamping.com/），然而，同样的问题仍然存在。即使是纯色也是如此。我在想是否有办法告诉浏览器div的高度以防止跳跃？或者我愿意接受其他答案。非常感谢。

Answer 1

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

Answer 2

我正在分享我的想法，

您可以创建一个与整个网站重叠的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 [fadeout slide animations]有一个很酷的后期预载效果。

希望它有所帮助！

防止网站跳跃负载

2 个答案: