作为一名Web开发人员，我发现自己要解决的一个常见问题是在执行其他操作之前先等待加载。特别是，我常常在等待背景图像或CSS文件加载时隐藏（根据情况使用display: none;或visibility: hidden;）元素。
考虑来自Last.FM的this example。他们在每张专辑封面图像上覆盖了半透明的PNG，使其看起来像在珠宝盒中。他们让它在加载时加载，因此，根据您的互联网速度，您可能会暂时（没有覆盖层）单独看到艺术图片。在这种情况下，专辑封面看起来很好，没有珠宝盒效果。但是在类似的情况下，我发现我不希望用户看到网站的设计随着资源的逐渐加载而受到影响。因此，在极少数情况下，我会隐藏用户的所有内容，直到整个工具包和kaboodle加载完毕。但这通常很难写出来，并且可能迫使用户等待很长一段时间才能看到任何内容（“正在加载...”文本除外）。
我可以想到（并偶尔使用）一些明显的解决方案/折衷方案：
使用一些内联CSS，以便在DOM的某些部分加载和呈现时，它们将立即具有正确的大小/位置/等。
立即呈现站点的导航部分，这样，如果用户只想使用当前页面来到达其他地方，则不必等待其余部分加载。
首先加载像素化图像作为布局的占位符，然后延迟加载更高质量的图像作为替换。
有点奇怪，例如在“加载...”阶段使用可爱的动画gif来分散用户的注意力。
加载完整的UI时，显示有用的信息作为参考。 （类似于Gmail Inbox Preview等）
（很抱歉，我的问题基本上只是被问到并回答了...）
尽管有所有这些想法，但我仍然发现自己希望有更好的方法来做这些事情。因此，我想我正在寻找的是一些启发和/或任何创造性的方式来解决你们可能在野外发现的这个问题。
最佳答案
这是一个普遍的问题。最好的选择是优化网站以加快加载速度。尝试YSlow
合并您所有的JS和CSS资产，因此每个请求只有一个。
有许多方法可以做到这一点，并且对于每个Web框架都存在许多资产打包程序
确保首先处理布局CSS
尽量减少您网站中的图片数量。组合事物并使用CSS Sprite会很有帮助
如果还不够，您可以在HTML文件中放置布局并调整CSS大小，以确保浏览器在链接CSS之前先对其进行处理