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 inweb design and development to defer initialization of an object until the point atwhich 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.
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
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.
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,
- We create a <link> element an assign it to a variable called link
- We then make it's rel value "stylesheet".
- We then set it's href to the path
- We then assign it's type which is text/css.
- 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 element.We then assign the path to the <link>'s href.Finally, we assign the other values and append the element to the <head>.
Using the function in our HTML file
Now we have successfully created a function to lazy load our style-sheets. It's up to you to decide when you are going to use the function.You might want to load your style-sheets when your web page has finished loading or load them when a button is clicked or ... :thinking:It's really up to you. So now, we are going to use the function. We are going to lazy load our 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 the function we created. Inside our html file, we binded the lazy loading to 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.
Just a teen developer