Конфликт прелоадера с API Google maps

366
02 февраля 2017, 03:04

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

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

 #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?Возможно ли исправить мою реализацию?

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

Answer 1

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

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

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

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

на

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

READ ALSO
Удалить елемент в jQuery
javascript

Удалить елемент в jQuery

Как можно удалить весь item при нажатии на кнопку "Удалить"? Этих итемов может быть неограниченное количество

 320
Не работают генераторы
javascript

Не работают генераторы

Не работают генераторы, выкидывает ошибку

 418
Куда нужно загрузить код google analytics on_sent_ok?
javascript

Куда нужно загрузить код google analytics on_sent_ok?

Всем привет, подскажите пожалуйста как вставить атрибут для форм Куда нужно вставить, пробовал написать в input submit, выводит ошибкуПробовал...

 336
Нужна помощь с jquery inputmask (decimal)
jQuery

Нужна помощь с jquery inputmask (decimal)

Всем привет! Проблема такая: сейчас в inputmask в свойстве "radixPoint" стоит значение ","И когда ввожу в инпуте точку или запятую, то показывает запятую...

 449