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

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

irbees2008 irbees2008 Опубликовано - 19 - августа Разное
3180 - 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йту: 3892 дня
  • Новостей: 561
  • Комменты: 254
  • Зарегистрированно : 628
  • Онлайн всего: [4]
  • Гости: [3]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.421сек
  • Потребление памяти: 5.160 Mb 
  •   яндекс.ћетрика