Использовать браузеры для загрузки CSS перед показом страницы

Я сделал мобильную версию своего сайта. Однако при загрузке страницы сайт сначала отображается без применения CSS, и после второго (не более) он применяет CSS и корректно отображает его. Это поведение совместимо во всех браузерах (включая мобильные).

Есть ли у вас какие-либо идеи, как я могу заставить браузеры сначала загружать CSS (который действительно крошечный по размеру), а затем отображать контент? Я видел что-то в том, что касается CSS файлов вне head, но насколько я знаю, это касается спецификаций, и я боюсь, что такой хак может помешать работе некоторых мобильных браузеров.

Спасибо!

Update

Здесь источник

<?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>

Ответ 1

Вы думали о кешировании вашего файла CSS?

Ответ 2

Я считаю, что нашел лучший способ справиться с этим...

Вверху вашего выходного файла поместите следующее:

<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 для загрузки и обработки удаляет холст. Из моего тестирования это решает проблему полностью.

Ответ 3

Браузеры читают код сверху вниз, поэтому, чем выше код на странице, и насколько компактен код, будет влиять на время загрузки страницы. Вы не можете предварительно загрузить его, как если бы вы использовали изображения или что-то в этом роде, поэтому я бы действительно посмотрел в кеширование файла, это, вероятно, лучшее решение. Извините, нет лучшей альтернативы для этого. Но, если честно, время загрузки в одну секунду не так уж и плохо.

Ответ 4

Натан Банни - хорошая идея, которая вдохновила меня, но я думаю, что лучший способ - удалить оверлей с помощью javascript после полной загрузки документа.

$(document).ready( function() {
  $("#loadOverlay").css("display","none");
});

Ответ 5

Вы когда-нибудь использовали requirejs? вы можете установить после

requirejs.config(<confObj>);

что-то вроде этого

require(Array[<all your CSS & JS >]);

requirejs сделает кеш (как) материал для вас! requirejs api

Ответ 6

Вы можете убедиться, что элемент 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>

Поскольку тег div имеет display:none как встроенный стиль, он не будет отображаться до тех пор, пока не будет применен CSS. Когда применяется правило display:block !important, встроенный стиль div будет переопределен, а div будет полностью стилизован.