0

Здравствуйте. Я подключаю стили к своему веб-приложению с помощью 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 и только после этого отображать страницу.

2
  • 1
    Реализуйте подключение стилей через php
    – Dmitry B.
    9 мар 2018 в 12:19
  • Или используйте прелоадер
    – entithat
    9 мар 2018 в 12:20

1 ответ 1

0

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.