DEV Community

James
James

Posted on

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

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!