Load external javascript file after the page load

This article explains how to load external javascript files after the page is loaded. This article will be helpful to improve the page load speed.

External Javascript files and Page performance

Loading many external javascript files into a page can slow down the page’s performance. The page is delayed by waiting for the external Javascript files to be downloaded. One of the best approach is to call the JS files at the bottom of the page. It is in this context, the question of loading the external Javascript files after the pages is loaded.

Load external javascript after page load using Jquery

In this tutorial, jQuery’s .getScript() method is used to load the script.

$(window).load(function(){
  $.getScript('http://domainName.com/pathToJs/filename.js', function() {
    alert('Load is completed'); /*In this callback function you can fire the methods/functions defined in the loaded script file.*/
  });
});

The benefit of loading external JavaScript file after the page is loaded is that the page loads faster. This is extremely useful, if any third party JavaScript files’ loading is badly affecting your page’s performance. If you use this method to load the script, ensure none of the properties/values or methods/functions defined in the particular js file is fired out side the callback function.