CODEX

OMONP#2: Image Lazy Loading With LazySizes

A quick introduction to a library that has better browser support than the loading=”lazy” attribute.

Jon Portella
Mar 23 · 2 min read

Welcome to issue #1 One Minute, One NPM Package, where you discover cool NPM packages and how to use them in one minute.

⏮️ 🔛

What we will build

THE PROBLEM

The images on our website load all at the same time, including the ones that are not in view, blocking other assets to be downloaded.

This makes our website take longer to load, and has a bad effect on our UX.

A SOLUTION

We are going to use a nice little package called LazySizes to make images load only when they are scrolled into view.

To do that we only need to:

  1. Replace the attribute on images with a attribute, so the browser doesn’t download them automatically. Also, this allows LazySizes to take the image source in order to request it when scrolled into view.
  2. Add a class of to the image, so LazySizes knows it has to act on that element.

Here’s a quick demo, scroll to make images appear. You can check the network tab on the browser’s DevTools and you’ll see image requests being done as you scroll!

SImple image lazyloading with LazySizes.

CodeX

Everything connected with Tech & Code

Jon Portella

Written by

Full-Stack Developer, Teacher, Maker, and general Things-Doer. https://www.linkedin.com/in/jonportella/

CodeX

CodeX

Everything connected with Tech & Code

Jon Portella

Written by

Full-Stack Developer, Teacher, Maker, and general Things-Doer. https://www.linkedin.com/in/jonportella/

CodeX

CodeX

Everything connected with Tech & Code

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store