强制浏览器在显示页面之前加载CSS [英] Force browsers to load CSS before showing the page
问题描述
我制作了我的网站的移动版本。然而，当加载页面时，首先显示的网站没有应用CSS，并且在第二次（至多）之后它应用CSS并且正确地呈现它。这种行为在所有浏览器（包括移动浏览器）中都是一致的。
你有什么想法，我可以如何强制浏览器首先加载CSS（这非常小大小）和然后呈现内容？我已经看到了一些关于在头部之外包含CSS文件的事情，但据我所知它与规范不符，恐怕这种攻击可能会阻碍某些移动设备
$ b
谢谢！
更新
这是源代码
<？xml version =1.0encoding =UTF-8？>
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://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-Typecontent =application / xhtml + xml; charset = UTF-8/>
< meta name =descriptioncontent =免费的Java手机电子书。/>
< meta name =keywordscontent =免费电子书，免费书籍，图书阅读器，albite阅读器，albite图书，Java移动/>
< meta name =languagecontent =en_GB/>
< meta name =classificationcontent =public/>
< link rel =快捷图标href =favicon.ico/>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1/>
< link href =/ stylesheets / mobile.css？1289644607media =screen =stylesheettype =text / css/>
< / head>
< body>
<！ - .... - >
< / body>
< / html>
我相信我找到了一个更好的方法来处理这个问题...
在输出文件的顶部放置以下内容：
< head>< div id =loadOverlaystyle =background-color：＃333; position：absolute; top：0px; left：0px; width：100％; height：100％; z-index ：2000;>< / DIV>< /头>
然后在上次加载的CSS文件的最后一行放：
#loadOverlay {display：none;}
这基本上是针对自己的问题。加载可显示html的第一位在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).
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.
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>
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:
#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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
