• 1001
  • 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>
Ну вроде все с этим.

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

mistakes

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

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

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Облако тегов

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