Lozad is a highly performant, light and configurable lazy loader in pure JavaScript with no dependencies. You can learn more on the Intersection Observer API and the details of this implementation in Denys’s article.Ī quick and easy alternative for implementing lazy loading of images is to let a JS library do most of the job for you. On the flip side, although the Intersection Observer API is supported by most browsers in their latest versions, it’s not consistently supported by all of them. The merits of this solution: it’s a breeze to implement, it’s effective, and has the intersectionObserver do the heavy-lifting in terms of calculations. This gives each image placeholder (the img element without the src attribute) a vertical dimension: img, config ) įinally, you iterate over all of your images and add them to this iterationObserver instance: const imgs = document. In the CSS, you give each image a min-height value, let’s say 100px. The reason is that using src means the image would load right away, which is not what you want. Notice how the path to the image is contained inside a data-src attribute, not a src attribute. The markup for each image would look like this: Let’s say you’d like to lazy load an image gallery. In other words, what’s being asynchronously watched is the intersection of one element with another.ĭenys Mishunov has a great tutorial both on the Intersection Observer and on lazy loading images using it. The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. The Intersection Observer API is a modern interface that you can leverage for lazy loading images and other content.

#2 Lazy Loading Using the Intersection Observer API However, although at the time of writing most major browsers have good support for the loading attribute, not all browsers are on board yet.įor an in-depth article on this awesome feature for lazy-loading images, including browser support workarounds, don’t miss Addy Osmani’s “ Native image lazy-loading for the web!”. This method has no rivals: it has zero overhead, it’s clean and simple.

auto: leaves the option to lazy load or not to lazy load up to the browser.

eager: instructs the browser to load the specified content right away.

loading can take any of these three values: The loading attribute gives us the option to delay off-screen images and iframes until users scroll to their location on the page. Nothing could be more straightforward than the markup below: Īs you can see, no JavaScript, no dynamic swapping of the src attribute’s value, just plain old HTML. Native lazy loading of images and iframes is super cool. I did just that and came across these five interesting techniques. Nothing gives you more control than coding something yourself.Īlternatively, you can browse the Web for viable approaches and start experimenting with them. If you live and breathe JavaScript, implementing your own lazy loading solution shouldn’t be an issue. Well, lazy loading images helps with website performance, but what’s the best way to go about it? This means considerable savings in bandwidth, for which most users, especially those accessing the Web on mobile devices and slow-connections, will be thanking you.

Since most lazy loading solutions work by loading images only if the user has scrolled to the location where images would be visible inside the viewport, those images will never be loaded if users never get to that point.

On a site with a significant number of images, lazy loading - or loading images asynchronously - could make the difference between users staying or leaving your website. It’s common for scripts to wait until the DOM has completely loaded before they start running.

If your website uses JavaScript to display content or provide some kind of functionality to users, loading the DOM quickly becomes critical.

There are at least a couple of excellent reasons why you should consider lazy loading images for your website: Why Should You Care About Lazy Loading Images?

Best way to optimize images for web