Заставьте браузеры загружать CSS перед показом страницы - PullRequest
Новая
       9

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

18 голосов
/ 13 ноября 2010

Я сделал мобильную версию своего сайта. Однако при загрузке страницы сайт сначала отображается без применения 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>

Ответы [ 5 ]

29 голосов
/ 31 марта 2014

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

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

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

2 голосов
/ 29 июля 2015

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

requirejs.config(<confObj>);

вы можете установить что-то вроде этого 

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

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

1 голос
/ 18 ноября 2014

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

$(document).ready( function() {
  $("#loadOverlay").css("display","none");
});
1 голос
/ 14 ноября 2010

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

0 голосов
/ 09 января 2019

Вы можете убедиться, что элемент 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 будет выглядеть полностью стилизованным.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...