Lazy-loading Stylesheets And Scripts With Your Own Javascript Function


Written by Lucretius | Last Updated


Introduction

So you have heard of lazy loading. Let me quote from wikipedia. "Lazy loading is a device pattern commonly used in computer programming and mostly in web design and development to defer initialization of an object until the point at which it is needed." It is simple, it means, not calling an object until it is needed. Implementing this method in web development is essential as it helps your web pages to load faster.

When ever a web page is loaded, it is loaded from top to bottom. When it encounters a script or stylesheet, it pauses and loads them before continuing to load the page.
Meaning if your script is very large, it will take time before the whole web page is loaded.
Whiles the script file is downloading, your user will be staring at a blank screen and this will make your user leave the page.
According to Piotr, a one-second delay in loading a page is enough to make 11% of it's total visitors leave it in no time.
This means that you don't have to delay your visitors at all. Even if you will delay them, present them with something as the page is loading in the background to keep them happy 😃.

Importance of lazy loading

There are many reasons why you should lazy load your scripts, I am going to outline a few.

  • It makes your web pages load faster
  • Saves bandwith as the files are only loaded when needed
  • Reduces the number of HTTP requests during page load
  • Reduces the chance of a visitor leaving your website

JavaScript function to lazy load stylesheets

We are going to create a javascript function which will lazy load all our stylesheets. We are going to make our function dynamic so it will work for all situation in your website.
Let's say for example, we have three (3) stylesheets namely, "design.css, style.css, styling.css". When lazy loading it with our function.
We will write lazy_load_css(['style.css', 'styling.css','design.css']) and when lazy loading only one of them, we will write lazy_load_css("style.css") Cool🆒

Open your IDE and create a new file. Give it any name but make sure it's extension is '.js'. I am going to call my file's name 'script.js'
NB: Our function will append the stylesheets in the head of the html not the body.


😅 We are done with our function, just 24 lines of javascript.
Now, let me explain the code in the function. We first named a function lazy_load_css which takes a parameter path.
Then to the next line, we declared a variable type_of_path which stores the type of the path. Do note that, the path can be in two types, if you pass a single path to the function, the type of the path will be "string" but if you pass an array of paths to the function, the type of path will be object. Remember I said we are going to make our function dynamic.
If you want to lazy load a single stylesheet, you pass only the path of the stylesheet to the function and if you want to lazy load many stylesheets, you pass an array containing the paths of the stylesheets to the function.

Then to the next line, we performed a switch statement on the type_of_path variable. Let's look at the first case, case "object". The code below will only be executed if the path is an array or an object. Meaning your array contains many paths. We then define a variable head which is the head element of the html document.
We perform a for loop on the path object iterating through it's values one by one.

In each iteration, this is what happens,
  1. We create a <link> element an assign it to a variable called link
  2. We then make it's rel value "stylesheet".
  3. We then set it's href to the path
  4. We then assign it's type which is text/css.
  5. Then we append the element to the head tag.

We repeat this process till we have finished looping through all the paths.
Then to the next case statement which is case "string". That is if only a single path is passed to the function.
We get the head element and assign it to a variable called head. We then create a <link> element.
We then assign the path to the <link>'s href.
Finally, we assign the other values and append the element to the <head>.

Javascript function to lazy load scripts

Now, we are going to make another function to lazy load all scripts. We are going to write the function in the same file where the lazy_load_css is.
Let's start coding 😎.

The code above is our javascript function to lazy load javascript files. It works just like the function lazy_load_css. You can passs a single path or an array of paths to the function and it will lazy load those files. When a path is passed through the function, we first get the head tag.
Then we create a <script> tag and add the path as the script's src.
Then we append the <script> tag to the <head> tag.

Using the functions in our HTML file

Now we have successfully created two functions to lazy load our style-sheets and scripts. It's up to you to decide when you are going to use those functions.
You might want to load your style-sheets when your web page has finished loading or load them when a button is clicked or ...😄
It's really up to you. So now, we are going to use the two functions. We are going to lazy load our scripts and style-sheets when our web page has finished loading.
Let's create a simple HTML file.

So the code above is an example which uses our two functions.
Inside our html file, we binded the lazy loading to the window.onload event. Meaning, our function will only work after the html page has finished fully loading.
You can choose to bind the function to any event. It's up to you.