Good day!

Found on the Internet a simple implementation of the preloader

#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>

Animation for some reason is not reproduced, but this is not important. The problem is that standard google maps initialization conflicts with a piece of <body onload="myFunction()"> code and is displayed incorrectly.

In the scripts I am completely new and would like to ask, is it possible to implement the preloader without the onload event in the body? Is it possible to fix my implementation?

Thanks in advance for your help!

    1 answer 1

    As a result, I used a much simpler way of organizing a preloader, which does not lead to conflicts with the Google API.

    You can familiarize yourself with it by the link.

    The only thing you need to fix there is a script with

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

    on

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