How do you detach your pageload from third party scripts?

Question

I have this problem where the UI components of my page like the drop down menus arent available until thirdparty scripts finish loading. This causes a problem because who knows whats going on on those servers. I need to detach the availability of the page's interactive components from the loading of thirdparty stuff...

how?

=/

Answer 1

Try something like this:

<script type="text/javascript">
window.onload = function() {
  var scripts = [ '3rdparty1url','3rdparty2url','3rdparty3url',etc...];
  var head = document.getElementsByTagName('head')[0];
  for(var i = 0; i < scripts.length; ++i) {
    var scriptTag = document.createElement('script');
    scriptTag.src = scripts[i];
    head.appendChild(scriptTag);
  }
}
</script>

This will load in your external script files after the page has finished loading in the client's browser. Your form UI elements should all be available.

If you're using jQuery, you can do this:

<script type="text/javascript">
jQuery(function($){
    var scripts = [ '3rdparty1url','3rdparty2url','3rdparty3url',etc...];
    $.each(scripts, function(i,scrurl) {
      $('head').append($('<script>', { src: scrurl }));
    }
});
</script>

Answer 2

You should carefully think your page so that it is nicely degradable.

Make the menu available in some "bare" form before the JS are loaded and once they are you can then change the UI to be superfancy and full of bells and whistles :)

That will also be useful for those users (probably not many, but still...) who have JS turned off, and for indexing spiders to catch the content of your menus.

Answer 3

JS performance guru Steve Souders on JavaScript blocking and asynchronous loading gives a good overview. Google "asynchronous javascript loading" for a lot more information. There are libraries that can schedule and load external files too. Another.