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.

Lazy PersonWell, 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 Load Preview

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.
    Lazy Loading HTML Code

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! 😉

Meet Aneesh Bhatnagar

Aneesh Bhatnagar has written 67 articles on Slash Coding.

Aneesh Bhatnagar is a freelance web developer, who specializes in front-end website development with HTML5, CSS3 and jQuery. He believes in transforming the entire web into a Responsive Web. He also specializes in use of Bootstrap framework to get websites up and running.

Did you enjoy this article?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.

Comments

  1. By Paul

    Reply

  2. By Denis Ryabov

    Reply

  3. By Patrick

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pin It on Pinterest

Shares