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

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

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

Можешь почитать и вот эту статейку "Плавающий блок закладок"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

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

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [3] Google, Яндекс, Google
  • SQL запросов: 31
  • Генерация страницы: 0.319сек
  • Потребление памяти: 5.200 Mb 
  •   Яндекс.Метрика