Lazy Load Images to Boost Webpage Load Time

0saves

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 49 articles on Slash Coding.

I am a programmer by passion and this passion drives me crazy to learn a lot of programming languages. Blogging is also my passion and thus I decided to combine both my passions into one! And here I am, a Blogger who blogs about Programming...

Stay Connected with Slash Coding

RSS Feeds Facebook Twitter Follow Google+

Subscribing to SlashCoding will enable you to get all our latest posts, delivered directly to you. We do not Spam your email address and it stays safe with us!

Enter your email address:

0saves

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Comments

  1. By Paul

    Reply

  2. By Denis Ryabov

    Reply

    • 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=""> <strike> <strong>