Question

我制作了自己网站的移动版本。然而，当加载页面时，首先显示该站点而不应用CSS，并且在一秒钟之后（最多）它应用CSS并正确地呈现它。这种行为在所有浏览器（包括移动浏览器）中都是一致的。

您是否有任何想法，我如何强制浏览器首先加载CSS（其尺寸非常小）然后然后呈现内容？我已经看到了将{CSS}文件包含在head之外的内容，但据我所知，这与规范不符，我担心这样的黑客可能会破坏某些移动浏览器的内容。

谢谢！

更新

这是来源

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Albite BOOKS mobile</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta name="description" content="Free e-books for Java Mobile phones."/>
    <meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
    <meta name="language" content="en_GB"/>
    <meta name="classification" content="public"/>

    <link rel="shortcut icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <!-- .... -->
  </body>
</html>

Answer 1

我相信我找到了一个更好的方法来解决这个问题......

在输出文件的顶部添加以下内容：

<head><div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div></head>

然后在最后加载的CSS文件的最后一行放置：

#loadOverlay{display: none;}

这基本上是针对自身的问题。加载的第一个可显示的html在CSS加载和处理时在所有内容的顶部放置一个空白画布，加载和处理的最后一个CSS删除画布。从我的测试中，这完全解决了这个问题。

Answer 2

浏览器从上到下读取代码，因此代码在页面上越高，代码的紧凑程度将影响页面上的加载时间。你不能像使用图像或其他东西那样预先加载它，所以我真的会考虑缓存文件，它可能是最好的解决方案。对不起，没有更好的选择。但说实话，一秒加载时间并不是太糟糕。

Answer 3

Nathan Bunney - 这个好主意启发了我，但我认为更好的方法是在文档完全加载后用javascript删除叠加层。

$(document).ready( function() {
  $("#loadOverlay").css("display","none");
});

Answer 4

你曾经使用过requirejs吗？你可以在你的

之后设置

requirejs.config(<confObj>);

类似这样的事情

require(Array[<all your CSS & JS >]);

requirejs会为你做缓存（比如）的东西！ requirejs api

Answer 5

您可以使用以下简单技术确保在加载CSS元素之前不显示HTML元素：

// CSS
#my-div { display:block !important; }

// HTML
<div id = "my-div" style = "display:none;">

  <p>This will be display:none until the CSS is applied!</p>

</div>

由于div标签具有display:none作为内联样式，因此只有在应用CSS之后才会显示。应用display:block !important规则后，div的内联样式将被覆盖，并且div会显示为完全样式化。

强制浏览器在显示页面之前加载CSS

更新

5 个答案: