DEV Community

loading...

How to lazy-load images? The easiest way to lazy-load images on your website! ๐Ÿ–ผ

Muhammad Hasnain
ใƒป2 min read

Lazy-loading is the simple process of loading resources only when they are needed. These resources can be anything, from images to stylesheets, fonts, scripts, iframes etc.

This helps improve the performance of your website drastically because client does not have to download the images, videos and other resources when they aren't required. ๐Ÿฅณ๐ŸŽˆ

We're going to use the package called, "Lozad." To lazy-load images. Lozad. will only add 1 KB to your production ๐Ÿ“ฆ! Check out Bundlephobia ๐Ÿ˜ฑ for more info.

We're only going to lazy-load images but Lozad can handle lazy-loading for srcsets, background images, videos and iframes too. So, let's include the package and start hacking! ๐Ÿช“

npm i lozad
Enter fullscreen mode Exit fullscreen mode

Include Lozad in your entry or main JavaScript file. Alternatively, you could use Lozad CDN if you don't have module bundler set up.

import lozad from 'lozad';

// Makes sure to run the library when DOM loads.
document.addEventListener('DOMContentLoaded', () => {
   /**
   * This is all you need to do!
   * Check the link for advanced usages.
   * https://www.npmjs.com/package/lozad
   */
   lozad().observe();
});
Enter fullscreen mode Exit fullscreen mode

By default, Lozad will look for elements with class, "lozad". When the element is about to enter the viewport, Lozad takes the data-src or other such Lozad related attributes and assigns it to the src attribute to load the image.

<img class="lozad" data-src="https://example.com/img.jpg" />
Enter fullscreen mode Exit fullscreen mode

That's it, you've successfully added support for lazy-loading ๐ŸŽ‰๐Ÿงจ๐ŸŽŠ!

Best practice would be to leave the images that are in the header and lazy-load only the ones that are below the initial viewport.

Challenge!

Use Lozad to lazy-load a background image and video!

Thoughts?

Please, share your thoughts and experiences as to how lazy-loading improved your website. PS, are you guys interested in me writing about lazy-loading using vanilla JavaScript? Let me know in the comments, thank you!

Discussion (6)

Collapse
aymangamaldev profile image
AymanGamal-dev

Either way you can use :
The loading attribute on an element (or the loading attribute on an ) can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.

Source:
developer.mozilla.org/en-US/docs/W...

Collapse
hasnaindev profile image
Muhammad Hasnain Author

Thank you for sharing this! Yes, browsers natively support lazy-loading and they also natively support dynamic imports for scripts. The issue is browser compatibility and making sure that the site runs smoothly in case someone is using an older browser.

If supporting older browsers isn't a priority for you then the loading attribute you mention is a better choice. Please, look into support for the loading attribute here: caniuse.com/?search=lazy%20loading

Collapse
fogr profile image
Fogr

good one!

Collapse
hasnaindev profile image
Muhammad Hasnain Author

Thank you Fogr, glad you liked it! :)

Collapse
junaidkbr profile image
Junaid Ahmed

Combine this with proper srcset images and you got yourself a smoothly loading and performant web page. Thanks for the write up.

Collapse
hasnaindev profile image
Muhammad Hasnain Author

Yes! Lozad handles srcset which makes it an awesome solution.