@efimenko_b

Как правильно подключить css через js?

На PageSpeed Insights, было замечание, что подключение некоторых css блокировало моментальное отображение контента.
На просторах интернета нашел статью, где говориться что css можно подключить через js
function b(){
			var mass = ['css/bootstrap.min.css', 'css/font-awesome.min.css', 'style.css', 'css/media.css',];
			for(var i=0;i<mass.length;i++){
				var a=document.createElement("link");
		 		a.rel="stylesheet";
		 		a.href=mass[i];
		 		document.getElementsByTagName("head")[0].appendChild(a)
			}
var c=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;
c?c(b):window.addEventListener("load",b);

Правильно ли это вообще?
Дело в том что не все браузеры это поддерживают, к примеру это не работает в Сафари и в ие ниже 10го
Как вообще правильно сделать для оптимизации?
Может кто то даст ссылку на статью какую нибудь.
Заранее спасибо.
  • Вопрос задан
  • 4397 просмотров
Пригласить эксперта
Ответы на вопрос 6
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Дело в том что не все браузеры это поддерживают, к примеру это не работает в Сафари и в ие ниже 10го

Я еще во времена IE6 динамически менял CSS, создавая link. Что именно в данном коде не работает в Сафари и в IE10-?
Ответ написан
twobomb
@twobomb
Все правильно только вот я не понял зачем нужны 2 нижние строчки, может вот это ты имел ввиду.
window.onload = function(){
      var mass = ['css/bootstrap.min.css', 'css/font-awesome.min.css', 'style.css', 'css/media.css',];
      for(var i=0;i<mass.length;i++){
        var a=document.createElement("link");
     		a.rel="stylesheet";
     		a.href=mass[i];
     		document.getElementsByTagName("head")[0].appendChild(a)
      }
Ответ написан
Комментировать
@Beefeater
Есть видео, где много времени уделяется оптимизации: www.youtube.com/watch?v=ri2XWgIt59U&index=12&list=WL
В частности описывается Ваш принцип: Т.е. есть минимальный css, который загружается сразу в head и он содержит все основные селекторы для отображения контента. Все остальные файлы с css подгружаются в js, когда документ уже загружен (т.е. через событие onload)

Если же важен именно код подгрузки на Js, то twobomb выше описал вполне рабочий вариант
Ответ написан
Комментировать
mlnkv
@mlnkv
JavaScript Developer
это работает во всех браузерах начиная с ie8
Ответ написан
@GreatRash
Нахрена тут requestAnimationFrame? Вы таким извратным образом решили событие DOMContentLoaded запилить что ли?
Ответ написан
Комментировать
@WhiteSama
делал по клику на ссылку, но можно поместить путь в скрипт.
$('a').onload(function() {
  $('link').attr('href',$(this).attr('rel'));
});

<a href="#" rel="/css/for_blind/css/black.css"></a>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы