Jellyfish is a new progressively enhanced lazy image loader written in vanilla JS.
What is lazy loading? #
Lazy loading is the process of deferring the loading resources until they’re needed. In the case of images, that means waiting to load them until they enter the viewport.
This helps speed up initial load times, and saves users unneeded downloads.
The problem with most lazy loaders #
Most lazy loaders use a placeholder image—often a white 1px gif or a loading icon— as the image
src with the actual image when it comes into view.
How Jellyfish is different #
Jellyfish still uses a data attribute to specify the image source, but allows you to use a link to the photo instead of a loading icon or a blank gif. If the lazy loader ever breaks, users can simply click the link to view the photo.
<a data-lazy-load data-img="img/friends.jpg" href="img/elephant.jpg"> View Photo </a>
When the page loads, Jellyfish replaces all of the links with loading icons (it’s a single file so it’s only downloaded once), and then again with the actual image when it enters into the viewport.
You can all add titles, classes and more using additional data attributes.