0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: html, jquery, highload, асинхронная загрузка css</p>
1
<p>Теги: html, jquery, highload, асинхронная загрузка css</p>
2
<p>Асинхронная загрузка CSS даcт возможность показать веб-страницу быстрее. Это особенно важно, когда речь идет о мобильных устройствах, где канал связи может быть медленным. Давайте рассмотрим, как реализовать асинхронную загрузку.</p>
2
<p>Асинхронная загрузка CSS даcт возможность показать веб-страницу быстрее. Это особенно важно, когда речь идет о мобильных устройствах, где канал связи может быть медленным. Давайте рассмотрим, как реализовать асинхронную загрузку.</p>
3
<h3>Загружаем с jQuery</h3>
3
<h3>Загружаем с jQuery</h3>
4
<p>Если вы применяете jQuery, загрузить CSS асинхронно можно следующим образом:</p>
4
<p>Если вы применяете jQuery, загрузить CSS асинхронно можно следующим образом:</p>
5
<p>Данный код надо исполнить после загрузки документа и jQuery, что можно сделать, к примеру, в методе ready:</p>
5
<p>Данный код надо исполнить после загрузки документа и jQuery, что можно сделать, к примеру, в методе ready:</p>
6
<p>В результате весь HTML загрузится без блокирования (без ожидания загрузки CSS). А так как CSS загрузится после HTML, то посетитель станет видеть сайт без стилей, пока они тоже в свою очередь не загрузятся. Для сохранения внешнего вида сайта надо добавить тег со всеми стилями<em>style</em>(стили нужны для отрисовки верхней части страницы).</p>
6
<p>В результате весь HTML загрузится без блокирования (без ожидания загрузки CSS). А так как CSS загрузится после HTML, то посетитель станет видеть сайт без стилей, пока они тоже в свою очередь не загрузятся. Для сохранения внешнего вида сайта надо добавить тег со всеми стилями<em>style</em>(стили нужны для отрисовки верхней части страницы).</p>
7
<p>Таким образом, итоговый код будет выглядеть следующим образом:</p>
7
<p>Таким образом, итоговый код будет выглядеть следующим образом:</p>
8
<p>И не забудьте задать в теге<em>style</em>минимальное количество стилей, которое требуется для сохранения внешнего вида.</p>
8
<p>И не забудьте задать в теге<em>style</em>минимальное количество стилей, которое требуется для сохранения внешнего вида.</p>
9
<p><em>По материалам блога https://highload.today/.</em></p>
9
<p><em>По материалам блога https://highload.today/.</em></p>
10
10