强制浏览器在显示页面之前加载 CSS [英] Force browsers to load CSS before showing the page
问题描述
我制作了我网站的移动版本.然而，在加载页面时，该站点首先在未应用 CSS 的情况下显示，并在一秒钟后(最多)应用 CSS 并正确呈现.这种行为在所有浏览器(包括移动浏览器)上都是一致的.
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(尺寸非常小)然后然后呈现内容?我已经看到了一些关于在 head 之外包含 CSS 文件的内容，但据我所知，这违反了规范，而且我担心这种 hack 可能会影响某些移动浏览器.
Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and then render 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.
谢谢！
这是来源
<?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>
推荐答案
我相信我已经找到了更好的方法来处理这个...
I believe I have found a better way to handle this...
在输出文件的顶部放置以下内容:
At the top of your output file put the following:
<body>
<div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
...
</body>
然后在上次加载的 CSS 文件的最后一行放置:
Then on the last line of your last loaded CSS file put:
#loadOverlay{display: none;}
这基本上是针对自身的问题.当 CSS 加载和处理时，加载的第一个可显示 html 将一个空白画布放在所有内容的顶部，最后一位加载和处理的 CSS 删除画布.根据我的测试，这完全解决了问题.
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
