jQuery: добавление стилей на страницу

305
10 марта 2018, 21:12

Здравствуйте. Я подключаю стили к своему веб-приложению с помощью js. В head у меня содержится нечто подобное:

<script src="/template/default/js/jquery-3.2.1.min.js"></script> 
<script> 
 function includeCssFile($path) { 
    if (Array.isArray($path))  
       for (i = 0; i < $path.length; i++)  
          $("head").append("<link rel='stylesheet' type='text/css' href='" + $path[i] + "'>"); 
  } 
 
</script>

Стили подключаются, все ок, но проблема в том, что при загрузке страницы (если .css файла нету в кэше!) на долю секунды страница отображаться без css. Я так понимаю в это время именно загружается сам файл. Подскажите, как можно исправить ситуацию, а именно дождаться загрузки css и только после этого отображать страницу.

Answer 1

В данном случае можно использовать прелоадер, для примера взял с этого сайта:

var hellopreloader = document.getElementById("hellopreloader_preload"); 
 
function fadeOutnojquery(el) { 
  el.style.opacity = 1; 
  var interhellopreloader = setInterval(function() { 
    el.style.opacity = el.style.opacity - 0.05; 
    if (el.style.opacity <= 0.05) { 
      clearInterval(interhellopreloader); 
      hellopreloader.style.display = "none"; 
    } 
  }, 16); 
} 
window.onload = function() { 
  setTimeout(function() { 
    fadeOutnojquery(hellopreloader); 
  }, 1000); 
}
#hellopreloader>p { 
  display: none; 
} 
 
#hellopreloader_preload { 
  display: block; 
  position: fixed; 
  z-index: 99999; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  min-width: 1000px; 
  background: #E4F1FE url(http://hello-site.ru//main/images/preloads/oval.svg) center center no-repeat; 
  background-size: 114px; 
}
<div id="hellopreloader"> 
  <div id="hellopreloader_preload"></div> 
  <p></p> 
</div>

READ ALSO
почему не срабатывает событие blur в bootstrap?
javascript

почему не срабатывает событие blur в bootstrap?

indexhtml

 237
Почему num undefined?
javascript

Почему num undefined?

 230
Почему данные из формы не попадают сразу в компонент?
javascript

Почему данные из формы не попадают сразу в компонент?

Помогите пожалуйста понять скользкий моментЯ создал реактивную форму, добавил кастомный валидатор, который возвращает промис

 212
Не могу получить данные json
javascript

Не могу получить данные json

Создал на локальном сервере файл json-datajson

 215