LLLYN

Wait but why?

Maybe you don't need another lazy loader, but I felt like it is fun to create a new fully customizable image lazy loading service.

• Improve pagespeed by not loading unnecessary ressources
• Uses valid HTML
• No-js fallback

Demo

Have a look at all possibilities LLLYN gives you. DEMOTIME

Usage

Check out the documentation here: Dokumentation how to use LLLYN

Install with npm: npm install lllyn

Or if you prefer yarn: yarn add lllyn

The only thing you have to do is add a data-src attribute to your image and initialize Lllyn with the default settings. Lllyn will pick all images with the default classname lllyn-image. Lllyn will replace or add a src attribute to your image wih the source from data-src. Your image does not need to have a src.

Import Lllyn at the top of your ES6 file and initialize the Lllyn class.

// In your javascript file
import Lllyn from 'last-lazy-load-you-need';

const Loader = new Lllyn();
Loader.init();

<!-- In your html file -->
<img class="lllyn-image" data-src="YOUR-IMAGE-SRC" alt="">

If you encounter, that your images are loaded right away, it is a good idea to add a min-height to the image or it's container. If the image has no height attached and no source, the height will be 0. This means all images are very close together onload and the border of all images hit the intersection threshold --> all images are loaded without any scrolling 💁‍♀️.

Browser Support

Check: Can I use

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Android	Opera
IE ❌, Edge ✅	✅	✅	❌	❌	7.2	✅

Thanks to the awesome IntersectionObserver polyfill we have a really great browser support! It is not enabled by default and you need to install it first. Follow the instructions of the awesome polyfill.

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Android	Opera
IE7+, Edge	✔	✔	6+	✔	4.4	✔

Other Lazy Loaders

• lazysizes
• lozad.js
• blazy
• yall.js

Install

• use npm >= 9.x
• npm install
• npm run watch to test with live reload on localhost:3000
• npm run build to build js into dist/js folder

TODO

• add webp support
• picture / srcset support
• video support