Lazy Loading

With lazy loading logic in place, we no longer load resources without making sure that they are really required.



Course Duration

1 hr 40 mins








  • HTML

    HTML is the starting point of essentially everything, hence it is a requirement.

  • CSS

    CSS is needed for basic styling concerns.

  • JavaScript

    JavaScript is needed to watch for interactions and load resources when the need be.

Course overview

Lazy loading is a technique for loading images on the web only when they are needed to. It uses the idea of an image's appearance into the viewport which drives a procedure to load the image into view. Lazy loading is employed extensively around the web.

Most blogs, image galleries, and websites of other niches, use it to decrease loading times and save their user's device and network resources, such as battery and cellular data. Without lazy loading they will be left to simply eagerly load the images in the HTML which will in turn affect their sites' loading times, and ultimately their user base.

Not only does lazy loading improve the loading times of web pages but also makes sure that they look professional, elegant and leave an impression to the user that the developers of the site have put in at least some effort to design it. Lazy loading is so common out there that if you're about to start up a blog it will show in the suggestions for you to do. So why not start learning it today?

Learning outcomes

In this course you'll learn:

  1. How to incorporate HTML, CSS and JavaScript into building something useful for the web. You'll get to know how to build any application or utility for the web by first laying out its structure in the HTML and CSS, then thinking through how will elements interact with each other and then finally laying out the JavaScript code to blend all it together.
  2. What are responsive images in CSS and how in this modern era of designing developers are required to know these concepts to make their web applications be mobile-friendly.

Table of contents

  1. Foundation

    In this single unit we'll consider all that we need to know to implement a perfect and fully-functional lazy loading algorithm. We'll see how to calculate element offsets; how to track scroll positions; how to give fade effects to the images as they load; how to handler any errors creeping into the program and much more on this road.


  • What if I get stuck somewhere in the course?

    If you're having a hard time understanding a given concept in the course, feel free to reach out to me at, describing the issue you're facing. I'll try my level best to help you out.

  • Some important topics are missing from the course. Why is that so?

    The courses on Codeguage are released while they are still under construction so that learners can get early previews. As I continuously work on adding more and more content to the courses, if a given topic isn't covered today, there's a high chance that it's already under way and will show up very soon. You can follow Codeguage on Twitter to be updated with all the latest content releases.

  • How can I ask any general questions related to the course's content?

    Write to me at

It's different the 'Codeguage way'


When you have a robust foundation, with the fundamentals crystal-clear, your mind will intrinsically get that ability to handle any kind and level of complexity.


With a comprehensive resource that covers literally every aspect of a given topic, your time is spent practicing the learnt concepts, not resolving confusions and basic questions.


Coding is a detailed craft. Likewise, any resource trying to teach it in any way should be detailed as well, or else people will have to acquire those integral details from different places in a fragmented and haphazard manner.


Structure is vital to an intuitive learning experience of a given resource. Without structure, the right concepts get introduced at the wrong times, ultimately leading to confusion and breaking the desired flow of comprehension.

Let's start the learning!