Хаки и Скрипты Next Generation CMS : Разное, Верстка, CSS, JS : Асинхронная загрузка CSS

irbees2008 Опубликовано - 19 - августа Разное

Адаптировал: irbees2008
Уровень сложности исполнения: Справочник

Вот тоже назрела темка, нужная в век мобильного интернета. Ну что такое Асинхронная загрузка -- это отложенный вызов скриптов и стилей,что позволяет браузеру не дожидаться их загрузки и продолжать загрузку основного HTML .

Ну сейчас обсудим асинхронную загрузку CSS, это позволит быстрее показать страничку посетителю, особенно это необходимо для мобильных устройств, когда интернет хреновый.
И так способ первый - это загрузка с jQuery
Почти все сайты сейчас используют jQuery можно загрузить css асинхронно вот так :

Код:

$(document).ready(function() {
    $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />");
})

Страница загрузится сразу но без стилей, что тоже будет не очень хорошо, поэтому добавляем в head тег style со всеми стилями , чтобы стилизовать верхнюю часть страницы. Примерно вот это будет выглядеть:

Код:

<html>
     <head>
            <style>
                  h1 { color: #444 }
                  и еще куча стилей....
             </style>
      </head>
<body>
       <h1>Заголовок</h1>
<hr/>
...
<script src="/jquery.js"></script>
<script>
    $(document).ready(function() {
        $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />");
    });
</script>
</body>
</html>

Ну вроде все с этим.

Можешь почитать и вот эту статейку "Иконка у внешней ссылки"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.