优雅加载网页的提示？

Question

我有一个网页，当页面处于各种状态时，使用jQuery / javascript隐藏/显示/设置了大量内容。我遇到了一个问题，即在页面的初始加载时，我的所有内容都会以一种可怕的方式显示，只需在设置/隐藏/显示页面加载时应该如何设置。

任何人都可以推荐任何技术以更优雅的方式完成页面的初始加载吗？

Answer 1

这被称为FOUC - 一个没有风格的内容。

一种相当标准的方法是默认在css中隐藏内容，然后一旦使用javascript完成所有操作再次显示元素。

但是，您可以考虑尝试graceful degradation启用javascript来为您的网站添加功能，而不是依靠它来实现功能和外观，而不是针对progressive enhancement。 关于两种方法的相对优点，请参见here for a good blog post。

Answer 2

使用CSS将初始显示状态设置为隐藏（display:none或visibility:hidden，视情况而定）和jQuery / JavaScript以便稍后显示（通过直接样式或更改类别以显示它们）。

Answer 3

您可以将CSS display:none和visibility:hidden默认设置为隐藏元素。

Answer 4

添加叠加层并在页面加载完成后隐藏它怎么样？ :) 尝试添加一个带有id覆盖的div，或者由你决定，并按照这样设置样式：

#overlay{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  z-index:99
}

这会隐藏您的所有内容。并在网页加载完成后，用jquery隐藏它：

$(window).load(function(){
  $('#overlay').animate({opacity:'0'}).css('zindex','-10');
})