Jellyfish, a better image lazy loader
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 variable. The actual image is specified via a data attribute, and javascript replaces the src with the actual image when it comes into view.
This works great, but if a person’s browser doesn’t support the JavaScript APIs being used, or if (as is quite common on mobile devices) the file fails to download, the image never gets displayed and the user has no way of viewing it.
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.