0

Доброго времени суток!

Нашел в интернете простую реализацию прелоадера

 #loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -50px;
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #3498db;
  border-bottom: 3px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
<body onload="myFunction()">
    

<script>
  var myVar;

   function myFunction() {
     myVar = setTimeout(showPage, 1000);
   }

   function showPage() {
     document.getElementById("loader").style.display = "none";
     document.getElementById("myDiv").style.display = "block";
   }
</script>

 <div id="loader"></div>
            
            
<div style="display:none" id="myDiv">

 Контейнер с картой
 
</div>



</body>

Анимация почему то не воспроизводится, но не это важно. Суть проблемы в том, что стандартная инициализация google maps конфликтует с куском кода <body onload="myFunction()"> и выводится некорректно.

В скриптах я совсем новичок и хотел бы спросить, а возможна ли реализация прелоадера без события onload в body?Возможно ли исправить мою реализацию?

Заранее благодарен за помощь!

1 ответ 1

0

В итоге использовал намного более простой способ организации прелоадера, который не приводит к конфликтам с API Google.

Ознакомиться с ним можно по ссылке

Единственное, необходимо поправить там скрипт с

  $(window).load(function () {
      $(".load-container").delay(100).fadeOut(250);
  });
   

на

  $(window).on('load',function () {
      $(".load-container").delay(100).fadeOut(250);
  });

Ваш ответ

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

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