Lazy Load Images to Boost Webpage Load Time

Creating Fast and quick loading web pages are the things a client wants these days. Moreover, the developer themselves want to create such pages. There are various ways to boost up your page loading time, one of them being optimizing your images for a quick page load. Now, to optimize your images, there are two things you can do, either decrease the quality of your image and reduce its size or you can Lazy load your images with this trick to decrease your page loading time greatly.

Well, if you are unaware about Lazy Loading, let me tell you what is Lazy Loading. Lazy Loading is a technique to load a blank image of a fixed dimension on the webpage at first, but when the image gets in the area where the user can view it, it loads the actual image at that place. This decreases the initial page loading time and the customer/user is happy! I guess that’s what matters these days, happy people!

Let’s get started with this simple tutorial to help you boost your page loading time. This is a preview of what we are going to do in this tutorial.

Lazy Loading Images on your Webpage

For lazy loading images, we need to add some jQuery to our webpage and change the HTML markup of our page. Let’s get started with changing the HTML first.

1. First, create a blank image to use at the beginning of your page load. If you are LAZY to do that, simply save the following image.
2. In your HTML page, on the images where you want to lazy load, change the following things.
   • change the word “src” to “data-original”
   • add a class and set it to “lazy”
   • add a src attribute and set it to “blank.png”

   Well, this is how your image tag should look like now.

   <img src="blank.png" data-original="image.png" alt="Enter your ALT Text here."/>
   

3. Now, head over to the head tag of your page and include a few jQuery plugins. But before that, you need to download the Lazy Load jQuery plugin from github.
4. After you have downloaded the jQuery Lazy Load plugin, simply place it in the folder with the web page and include the following lines of code in your head tag.

   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
   <script type="text/javascript" src="jquery.lazyload.min.js"></script>
   

5. Now, we are almost done! We just need to enter a few more lines of code. Add the following lines just before closing the head tag on your page.

   <script type="text/javascript">
   $(document).ready(function() {
   $("img.lazy").lazyload();
   });
   </script>
   

6. Well, that’s all! You just finished the tutorial.
   

I hope this tutorial helps you to get a better page loading time and have more happy users. Stay tuned to Slash Coding for more tips and tricks for jQuery, CSS, PHP and more! Stay subscribed via RSS Feeds, our Facebook page, or our Twitter Account. See you around! 😉