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

Question

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

我已经制作了我网站的移动版本.然而,当加载页面时,首先显示该站点而不应用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nat*_*ney 32

我相信我找到了一个更好的方法来处理这个......

在输出文件的顶部放置以下内容:

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

Run Code Online (Sandbox Code Playgroud)

然后在上次加载的CSS文件的最后一行放置:

#loadOverlay{display: none;}

Run Code Online (Sandbox Code Playgroud)

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

这会影响搜索引擎优化吗？ (3认同)
好问题，答案是我不知道，需要进行测试。想法：页面元素将以与其他情况相同的速度加载，但它们将对用户隐藏，但不会对搜索引擎蜘蛛隐藏。因此，从蜘蛛的角度来看，您应该获得相同的指标，除非它们映射了用户实际看到的内容。如果是这种情况，那么就会降低 SEO。MOZ (https://moz.com/learn/seo/page-speed) 上的这篇文章表明这种做法根本不会造成任何伤害，谷歌（和假设的其他人）仅对第一个字节的时间进行评级。 (2认同)
`<div id="loadOverlay"` 元素不需要（我认为，***不应该**）位于 `<head>` 中。放入体内；它会工作得很好。我什至在IE7中进行了测试。 (2认同)
@Marc.2377 这是一个旧的，但你是对的。我将 <head> 更新为 <body>，谢谢！ (2认同)

Answer 2

Fra*_*ank 5

您可以确保使用以下简单技术加载 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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 3

Bla*_*ake 2

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

归档时间：	15 年，9 月前
查看次数：	31535 次
最近记录：	7 年，3 月前