DEV Community

James
James

Posted on

5 1

Lazy Loading Images For Your Digital Library

A quick morning (or afternoon, at this point) project to play with the magic of lazy loading. I wrote previously on my personal site about how I spent the beginning of the year getting rid of stuff. Like many people, I rather arrogantly identify as a reader. Books sort of amass as trophies. The books I've read occupy a relatively small space, but the books I plan to read threaten to tear the shelves straight off the wall.

The Japanese word for this is "tsundoku."

So, many books had to go. However, people tend to keep books around for two reasons:

1) I might read it again.
2) I like having it there.

The first point is debatable. The second, harder to argue with. I wanted to reclaim some space while ensuring that I wouldn't forget the books that I've read and enjoyed (or not) over the years.

And, as said, I wanted to play with lazy image loading.

https://jsrn.net/library/

library preview

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (2)

Collapse
 
anwar_nairi profile image
Anwar

Next step: finding a way to download images when the network comes back (I tried to disable my connection and scroll a bit, then put back my network on and scrolling further would not display the images not loaded), I also say that as a challenge for me because I need to lazy load images for my website as well! Good job

Collapse
 
jsrn profile image
James

In the spirit of laziness not reinventing the wheel, I copy/pasted the lazy loading code from the CSS Tricks article linked in the description.

How is What I Talk About When I Talk About Running? It's been on my list of things to read for some time!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️