我已经制作了我的网站的移动版本.然而,当加载页面时,首先显示该站点而不应用CSS,并且在第二次(最多)之后它应用CSS并正确地呈现它.此行为在所有浏览器(包括移动浏览器)中都是一致的.
@H_301_13@解决方法
你有什么想法,我怎么能强制浏览器首先加载CSS(其尺寸非常小)然后呈现内容?我已经看到了一些关于将CSS文件包含在脑海之外的东西,但据我所知这是违反规范的,我担心这样的黑客可能会在某些移动浏览器上制造东西.
谢谢!
更新
这是来源
<?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>
我相信我找到了一个更好的方法来处理这个…
<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删除画布.从我的测试中,这完全解决了这个问题.