All geek questions in one place

Javascript event to fire after all script files are loaded

My site works intensively with images, which means images take a huge amount of page load time. I use the google maps API, which works better if it is triggered in an event window load, however, given that loading a window expects all images to load in the first place, the user experience on the map has a negative effect.

This can be fixed if I can get a separate event that is aimed only at completing the download of the script files and starts rendering the map without touching the status of the images.

Now I know this is a strange thing, but given the scenario I explained, any ideas or workarounds will be helpful.

PS: Since I load my cards using the cluster module, I have no choice but to wait until all the scripts load first, so document readythis is not an option. In addition, loading scripts before starting the js map initialization does not work, since clustering of maps always occurs with a delay in loading external javascript, and therefore I have to rely on window load.

+4
source share
4 answers

DOMReady is about as close as you can.

$(document).ready(function(){
    //run the code here
});

Unfortunately, if the scripts you download load more scripts, you cannot find that besides observing that certain properties of the window become available using setInterval.

+1
source

, :

var everythingLoaded = setInterval(function() {
  if (/loaded|complete/.test(document.readyState)) {
    clearInterval(everythingLoaded);
    init(); // this is the function that gets called when everything is loaded
  }
}, 10);

: http://callmenick.com/post/check-if-everything-loaded-with-javascript

+1

DOMReady , , ( ), "scripts last".

<body>
  <!-- Content -->

  <!--
    Other JavaScript Files
  -->
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initializeMap"></script>
  <script type="text/javascript">
    function initializeMap(){ // as specified with callback= above
      var map = new google.maps.Map(...),
          ...;
      // etc.
    }
  </script>
</body>

, , lazy-loading (jquery ). , , " " ( , , ).

0

There is a way to do this in order, but you may not like it, because it only works in modern browsers.

In HTML5 script elements have the async property. If you set it to false using Javascript, the scripts are added and executed in the order in which they are presented in your page code.

var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);

link to link

0
source

Source: https://habr.com/ru/post/1531419/

More articles:


All Articles