Теперь Кью работает в режиме чтения

Мы сохранили весь контент, но добавить что-то новое уже нельзя

Как отложить загрузку CSS?

Языки программированияСоздание сайтовCss
Анонимный вопрос
  · 13,6 K
Разработка корпоративных сайтов и интернет-магазинов с 2013 года. Большой опыт в сфере...  · 26 авг 2020  · pavelorekhov.ru
Отвечает
Павел Орехов

Если у вас в проекте есть большие файлы css:

  • Для начала их можно менимизировать например с помощью сервиса https://csscompressor.com/ . Я выбираю обычно метод "High" css код получается компактный и удобно читаемый.
  • Чтобы при загрузке сайт не скакал Стили первого экрана вынесите в HEAD.
  • Все остальные стили по возможности уберите в подвал.
  • Включите на сайте кеширование.

В таком случае особых проблем не должно быть с загрузкой страницы.

Если после всего проделанного все таки у вас возникнет необходимость отложить загрузку css файла сделайте это с помощью JS.

<script type="text/javascript">

var head = document.head

, link = document.createElement('link');

link.type = 'text/css';

link.rel = 'stylesheet';

link.href = '{{ путь к вашему файла }}';

head.appendChild(link);

</script>

Создание корпоративных сайтов и интернет-магазиновПерейти на pavelorekhov.ru
Сколько слышал убрать стили в подвал, и пробовал, не красивая загрузка сайта получается, лучше пусть будут в head... Читать дальше
Frontend-разработчик, основатель учебного портала frontendblok.com, frontendhelp.me и...  · 7 сент 2018  · youtube.com/channel/UCn5wduCq2Mus0v85QZn9IaA
Для асинхронной загрузки CSS можно использовать jQuery, если вы уже применяется его на своем сайте. ​ Добавьте следующий скрипт: > $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />"); ​ Если этот код необходимо выполнить после загрузки документа и jQuery соответственно, например в методе ready, то пишем следующее: ​ > $(document).ready(func... Читать далее

Куда добавить? В какой файл?

Игры, кино, аниме, языки, бокс  · 19 июл 2018
Если вы имеете ввиду загрузку критического CSS после загрузки страницы, то попробуйте эти варианты: 1) С использованием jQuery: <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> </body> </html> <noscript><link rel="stylesheet" href="small.css"></noscript> 2) С использованием NoScript и JS <html> <head> <style> .blue{... Читать далее

полная бридятина

к какому скрипту написали ? это что Hello, world! ?

Лучше всего не создавать ситуацию, когда необходимо откладывать загрузку каких-то стилей, т.е. прямо говоря, создавать билды под контент конкретных страниц\шаблонов. В остальном можно воспользоваться динамической загрузкой компонентов, например ленивой загрузкой React-а. Или банальной конструкцией setTimeout, запущенной в конце документа (по факту загрузки, см. события... Читать далее