How to make Lazy Loading Script with JQuery in 2 easy Steps

Looking to make lazy loading script using JQuery to faster your BlogSpot? The “trick” is to find the <img> tags in your blog and add loading attribute to it. You can either using native JavaScript of JQuery to add the attribute. Several JQuery plugins are also available on the internet but I guess that you want to make yours.

As a reminder, Lazy Loading is a term given to an HTML attribute applied to images to prevent browsers rendering them before they are on the visible area. In other words, browsers will only render the images when the page scrolled until reaching the image tags. Therefore, it is also called on-demand loading. The function of this attribute is to optimize the page rendering that impacts your blog loading time; it becomes faster since the images are not rendered before they get into the visible area. Lazy loading script is also included in RemlinkJS which is useful to remove the hyperlink of the images on the blogger posts.

Read also: The Best Code Editor for Bloggers

The BlogSpot template you are using uses JQuery. Therefore, there is no need to code Lazy Loading in native JavaScript. Of course, you can do so but why do you make longer JavaScript script if you can make it shorter with JQuery?

Step #1. Create a function

The first step is to create a function that holds the commands. In JQuery, the function will be executed once the page has been fully loaded. The syntax is quite common:

<script>
$(document).ready(function(){
//codes will go here…
});
</script>

Above is the function or a container that holds commands or codes that will be executed when the page is “ready” or has been fully loaded.

Step #2. Finding all <img> tags and set the Loading attribute to them

The next step is to find all the images in your page. It is simple if you are coding it in JQuery. Your images tags are stored within the <img> tags. So, the logic will sound “please find all the <img> tags and add the attribute loading and set the value of the attribute to lazy.”

$(“img”).attr(“loading”,”lazy”);

That’s it. Your complete code will look like:

<script>
$(document).ready(function(){
$(“img”).attr(“loading”,”lazy”);
});
</script>

Now, you need to install this code on your BlogSpot. It is easy. All you need is to copy and paste the code just after the </body> tag in your Blogger Template. If you don’t know where your Blogger template is, follow this instruction:

How to Install Lazy Loading Script on Blogger Template

1. Open your Blogger Dashboard
2. Go to Theme
3. Under My Theme, click the down arrow beside Customize
4. Click Edit HTML
5. Use CTR+F to find </body> tag
6. Paste your Lazy Loading script above the tag
7. Click the Save Button at the top right corner

Lazy Loading is good to enhance your blog speed because it helps the browser to focus on what to render first and what to render after. You don’t have to worry if your images will not appear because all the images that you put on the top of the page will be rendered when the page loads since they are already on the visible area.