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
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