JavaScript: asynchronous loading
JavaScript is an important part of web developing. We heavily rely on JavaScript library and more than often we use external reference to load js snippets. In order to link an external js file we usually insert the following code where needed:
There's a solution to the above issue: using asynchronous loading and here I show you how to use it.
Some background
With asynchronous loading, your external resource will be loaded only after the loading of the page. So, we should be careful in using it, because we have to be sure that the whole page is not totally relying on that external snippet.
On the good side of things, our page will load faster and it will be always ready for the user.
Those counter-effects can be solved by carefully placing the loaded content ('http://externalDomain.com/script.js') in the right spot or, for example, creating the needed space when the page loads.
In the end, we have to play with it a bit to fully understand how to correctly implement the asynchronous loading of JavaScript snippets. As usual, we need to test and trial, but I'm sure you will find the idea quite interesting in many cases.
There's a solution to the above issue: using asynchronous loading and here I show you how to use it.
Some background
With asynchronous loading, your external resource will be loaded only after the loading of the page. So, we should be careful in using it, because we have to be sure that the whole page is not totally relying on that external snippet.
On the good side of things, our page will load faster and it will be always ready for the user.
The code
The code is just a few lines:The effect
As said above, the page will load faster, but we might end up dealing with some minor effects. For example, the asynchronous loading of the external resource could move page elements after the page is loaded, causing an unwanted "resetting" of some elements (like the sliding of a container). In other cases, some functions might be available to the user with a small delay, giving the impression that the page froze for a moment.Those counter-effects can be solved by carefully placing the loaded content ('http://externalDomain.com/script.js') in the right spot or, for example, creating the needed space when the page loads.
In the end, we have to play with it a bit to fully understand how to correctly implement the asynchronous loading of JavaScript snippets. As usual, we need to test and trial, but I'm sure you will find the idea quite interesting in many cases.