Ответ в теме: Асинхронная загрузка сайта

[sarkisХранитель]

Здравствуйте. Данный вопрос имеет ряд сложностей в реализации, т.к придется много чего переделать и не все удастся с легкостью переделать, да и на практике может не оправдаться.

Но принцип может быть след. для css:
1. убираете все лишние css, которые не используете
2. используете распределенные стили, т.е не в одном файле все стили, а для каждого модуля свои стили подгружаются при необходимости
3. минимизация кода css
4. убираете подключение стилей из head
5. в конце тега body ставите код, который подключит стиль только после того, как страница вся прогрузится.

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

1 2 3

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

В итоге : при малой скорости вы увидите сначала белый экран с текстом, а потом уже стили .

С js – кодом почти тоже самое по пунктам, но немного все обстоит сложнее .

Вы подключили

<script src="/jquery.js" async></script>,

1	<script src="/jquery.js" async></script>,

но чтобы скрипт заработал, например

<script>$('body').addClass('red_green');</script>

1	<script>$('body').addClass('red_green');</script>

нужно сделать следующее

<script>function loader() { $('body').addClass('red_green'); }</script> <script src="/jquery.js" async onload="loader()"></script>

1 2 3 4

<script>function loader() {     $('body').addClass('red_green'); }</script> <script src="/jquery.js" async onload="loader()"></script>

• Этот ответ был изменен 3 года/лет назад от  sarkis.