INTRODUCTION
DYNAMIC SCRIPTS
Welcome to a tutorial on how to dynamically load Javascript and CSS. So you have a project that requires some sorcery to dynamically load scripts only when certain requirements are met? Load multiple libraries only when required? Yes, it is possible, and this guide will walk you through how to do it along with some examples. Read on to find out!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Section A | Section B | Section C |
Extra | Closing |
SECTION A
THE BASICS
Before we dive into the actual examples, here is the “library” that will use to dynamically load more scripts.
THE SCRIPT THAT WILL LOAD SCRIPTS
/* [DYNAMIC LOAD FUNCTIONS] */
var loader = {
js : function (url, loaded) {
// loader.js() : load the specified JS file
// PARAM url : target JS file to load
// loaded : function to call on script loaded
var tag = document.createElement("script");
if (typeof loaded == "function") {
tag.onload = loaded;
}
tag.src = url;
document.head.appendChild(tag);
},
css : function (url, loaded) {
// loader.css() : load the specified CSS file
// PARAM url : target CSS file to load
// loaded : function to call on script loaded
var tag = document.createElement("link");
if (typeof loaded == "function") {
tag.onload = loaded;
}
tag.rel = "stylesheet";
tag.type = "text/css";
tag.media = "all";
tag.href = url;
document.head.appendChild(tag);
}
};Yep, that is all to it. The “magic” behind dynamic loading is just to create a new or tag and insert it into the section.
BASIC USAGE EXAMPLE
Simple Dynamic JS and CSS Loading Demo
Lorem Ipsum Dolor sit amet, quo ut quidam omnium, nam integre adipiscing te, has nonumes scaevola cu.
Ea vitae vituperatoribus nec, quidam debitis delectus has et, eam an malis affert.
Ea qui tibique nominati comprehensam, fugit Vivendum Abhorreant Nam at.
SECTION B
ACTUAL USES
Now that we are done with the basics, let us move on with some examples that are actually useful.
LOADING POLYFILL SCRIPTS
For those who do not know what polyfills are – There are many new functions being implemented into browsers over the years, and that has left a lot of the old browsers biting the dust. Polyfill scripts are kind of a “backward compatibility script” that will implement a fallback so that your newer scripts can run as usual.
So in this example, we will be checking if the user’s browser has native JSON API, and load a polyfill if it is not found – Using the dynamic loading, that is.
Load Polyfill Demo
Lorem ipsum dolor sit amet, quo ut quidam omnium, nam integre adipiscing te, has nonumes scaevola cu.
Ea vitae vituperatoribus nec, quidam debitis delectus has et, eam an malis affert.
Ea qui tibique nominati comprehensam, fugit vivendum abhorreant nam at.
GRACIOUS CSS FALLBACK
Sadly, we can polyfill Javascript but not CSS. So this is kind of an “alternate” example that detects if the browser supports CSS animations. It will load a modern CSS theme if supported, and a fallback version if not.
Load Compatible CSS Demo
Lorem ipsum dolor sit amet, quo ut quidam omnium, nam integre adipiscing te, has nonumes scaevola cu.
Ea vitae vituperatoribus nec, quidam debitis delectus has et, eam an malis affert.
Ea qui tibique nominati comprehensam, fugit vivendum abhorreant nam at.
PARTIAL LOADING
This example is a technique that I both love and hate. We will only include the bare necessary scripts on the “first run” so that it loads faster and shows something to the user. It is only when the user clicks on something or does a certain action will more scripts be loaded.
Partial loading Demo
Lorem ipsum dolor sit amet, quo ut quidam omnium, nam integre adipiscing te, has nonumes scaevola cu.
Ea vitae vituperatoribus nec, quidam debitis delectus has et, eam an malis affert.
Ea qui tibique nominati comprehensam, fugit vivendum abhorreant nam at.
LOADING MULTIPLE SCRIPTS (WHEN REQUIRED)
This example is a step up from the above, but we will load multiple scripts only when the user requires certain functions.
Multiple Scripts Loading
Lorem ipsum dolor sit amet, quo ut quidam omnium, nam integre adipiscing te, has nonumes scaevola cu.
Ea vitae vituperatoribus nec, quidam debitis delectus has et, eam an malis affert.
Ea qui tibique nominati comprehensam, fugit vivendum abhorreant nam at.
SECTION C
EASTER EGGS
Next up, this section contains a few easter eggs… So what if we load a script, will it override existing functions? Can we unload scripts?
OVERRIDING FUNCTIONS
Partial loading Demo
Lorem ipsum dolor sit amet, quo ut quidam omnium, nam integre adipiscing te, has nonumes scaevola cu.
Ea vitae vituperatoribus nec, quidam debitis delectus has et, eam an malis affert.
Ea qui tibique nominati comprehensam, fugit vivendum abhorreant nam at.
Yes, functions and variables will be overridden in a dynamic script load. So be very careful with your function and variable names. Especially when namespace doesn’t exist in Javascript.
UNLOADING SCRIPTS?
So, if we can load scripts dynamically and override stuff – Can we do the opposite of unloading the scripts?
Partial loading Demo
Lorem ipsum dolor sit amet, quo ut quidam omnium, nam integre adipiscing te, has nonumes scaevola cu.
Ea vitae vituperatoribus nec, quidam debitis delectus has et, eam an malis affert.
Ea qui tibique nominati comprehensam, fugit vivendum abhorreant nam at.
Sadly, the answer turns out to be no. Once overridden, it will remain in the memory. Removing the script tag does absolutely nothing.
EXTRA
DOWNLOAD
That’s all for the code, and here is the download link as promised.
SOURCE CODE DOWNLOAD
Click here to download the example code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
The post How To Dynamically Load Javascript & CSS appeared first on Code Boxx.
