Html 强制浏览器在显示页面之前加载 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4172281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force browsers to load CSS before showing the page
提问by Albus Dumbledore
I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at most) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).
我已经制作了我网站的移动版本。然而，在加载页面时，该站点首先在未应用 CSS 的情况下显示，并在一秒钟后（最多）应用 CSS 并正确呈现它。这种行为在所有浏览器（包括移动浏览器）中都是一致的。
Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and thenrender the content? I've seen something about including the CSS files outside the head, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.
您知道如何强制浏览器首先加载 CSS（尺寸非常小）然后呈现内容吗？我已经看到一些关于将 CSS 文件包含在head.
Thanks!
谢谢！
Update
更新
Here's the source
这是来源
<?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>
回答by Nate Bunney
I believe I have found a better way to handle this...
我相信我已经找到了一个更好的方法来处理这个......
At the top of your output file put the following:
在输出文件的顶部放置以下内容：
<head><div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div></head>
Then on the last line of your last loaded CSS file put:
然后在上次加载的 CSS 文件的最后一行放置：
#loadOverlay{display: none;}
This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.
这基本上将问题用于自身。当 CSS 加载和处理时，加载的第一个可显示 html 将一个空白画布放在所有内容的顶部，最后一位加载和处理的 CSS 删除画布。从我的测试来看，这完全解决了问题。
回答by Lazaros Kosmidis
Have you ever used requirejs? you could set after your
你用过requirejs吗？你可以设置你的
requirejs.config(<confObj>);
something like this
像这样的东西
require(Array[<all your CSS & JS >]);
requirejs will do the cache (like) stuff for you! requirejs api
requirejs 会为你做缓存（比如）的东西！ 需要 api
回答by Frank
You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:
你可以确保一个 HTML 元素在它的 CSS 被加载使用这个简单的技术之前不会显示：
// 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>
Because the div tag has display:noneas an inline style, it will not be displayed until after the CSS is applied. When the display:block !importantrule is applied, the div's inline style will be overridden and the div will appear fully styled.
由于 div 标签具有display:none内联样式，因此在应用 CSS 之后才会显示。当display:block !important应用规则，div的内嵌样式将被覆盖，并在div将出现全面的风格。
回答by Blake
Browsers read code from the top to the bottom, so the higher the code is on page, and how compact the code is, will affect the load time on the page. You can't really pre-load it like you would with images or something, so I would really look into caching the file, it's probably the best solution. Sorry theres no better alternative for this. But to be honest, one second load time isn't really too bad.
浏览器从上到下读取代码，因此代码在页面上的位置越高，以及代码的紧凑程度，都会影响页面的加载时间。您不能像使用图像或其他东西那样真正预加载它，所以我真的会考虑缓存文件，这可能是最好的解决方案。抱歉，没有更好的选择。但老实说，一秒钟的加载时间并不算太糟糕。
回答by mkoziol
Nathan Bunney - good idea that ispired me, but i think better way is to remove overlay with javascript after document is fully loaded.
Nathan Bunney - 启发了我的好主意，但我认为更好的方法是在文档完全加载后使用 javascript 删除叠加层。
$(document).ready( function() {
$("#loadOverlay").css("display","none");
});
