Хаки и Скрипты Next Generation CMS

Асинхронная загрузка CSS

irbees2008 irbees2008 Опубликовано - 19 - августа Разное
2644 - 0
  • Адаптировал: 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>
Ну вроде все с этим.

Можешь почитать и вот эту статейку "Плагин "Архив сайта""

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3357 дней
  • Новостей: 546
  • Комменты: 254
  • Зарегистрированно : 574
  • Онлайн всего: [8]
  • Гости: [8]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.306сек
  • Потребление памяти: 5.147 Mb 
  •   яндекс.ћетрика