Gathering detailed insights and metrics for loadeer
Gathering detailed insights and metrics for loadeer
🦌 Tiny, performant, SEO-friendly lazy loading library. Deprecated, please use https://unlazy.byjohann.dev
npm install loadeer
Typescript
Module System
Node Version
NPM Version
70
Supply Chain
99.3
Quality
75.8
Maintenance
100
Vulnerability
100
License
TypeScript (100%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
91,529
Last Day
43
Last Week
345
Last Month
1,610
Last Year
22,115
MIT License
43 Stars
119 Commits
2 Forks
3 Watchers
1 Branches
3 Contributors
Updated on Sep 12, 2024
Minified
Minified + Gzipped
Latest Version
2.1.3
Package Id
loadeer@2.1.3
Unpacked Size
18.86 kB
Size
7.06 kB
File Count
13
NPM Version
9.5.0
Node Version
18.15.0
Published on
Apr 10, 2023
Cumulative downloads
Total Downloads
Last Day
-15.7%
43
Compared to previous day
Last Week
4.5%
345
Compared to previous week
Last Month
-2.1%
1,610
Compared to previous month
Last Year
-45.3%
22,115
Compared to previous year
Tiny, performant, SEO-friendly lazy loading library
If you have used Lozad.js, then you already know how to use Loadeer.js. This library is basically an overhauled and opinionated version of Lozad.js, which includes sizes
support, makes usage of data
attributes instead of classes and is written in TypeScript.
Loadeer.js is intended to be used with <img>
, <picture>
and <video>
tags. It supports the srcset
and sizes
attributes, as well as the loading
attribute. It is also possible to use the data
attributes instead of the native attributes.
init
script attributesizes
attributeloading="lazy"
if you preferdata
attributes for image sources<picture>
: Supports multiple image formatsLoadeer.js can be used without a build step. Simply load it from a CDN:
1<script src="https://unpkg.com/loadeer" defer init></script> 2 3<!-- Anywhere on the page --> 4<img 5 data-lazyload 6 data-srcset="/foo.png 1024w, /foo-2x.png 2048w" 7/> 8 9<!-- Or use the picture tag instead --> 10<picture> 11 <source data-lazyload data-srcset="/bar.jpg" media="(min-width: 800px)"> 12</picture>
defer
attribute makes the script execute after HTML content is parsed.init
attribute tells Loadeer.js to automatically initialize and watch all elements that have a data-lazyload
attribute.If you don't want the auto initialize, remove the init
attribute and move the scripts to end of <body>
:
1<script src="https://unpkg.com/loadeer"></script> 2<script> 3 const loadeer = new Loadeer() 4 loadeer.observe() 5</script>
Or, use the ES module build by installing the loadeer
npm package:
1import Loadeer from 'loadeer' 2 3const loadeer = new Loadeer() 4loadeer.observe()
The short CDN URLs are meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost:
Loadeer
global property, supports auto initializing<script type="module">
Add the data-lazyload
attribute to an element of your choice which you seek to lazily load. Set a data-src
or data-srcset
attribute as well.
1<!-- You can use the img tag --> 2<img data-lazyload data-src="image.png" /> 3 4<!-- … or the picture element --> 5<picture> 6 <source data-lazyload data-srcset="/foo.jpg" media="(min-width: 800px)"> 7</picture>
Although Loadeer.js' default selector is data-lazyload
, you may configure it to a selector of your choice. See the libraries options for more information.
Finally, instantiate Loadeer.js as follows:
1const instance = new Loadeer() 2// Lazily loads all `data-lazyload` images 3instance.observe()
Note
Use with caution. Especially if placeholder images are used, the native lazy loading attribute interferes, since all
data-src
attributes will be converted tosrc
once Loadeer.js runs. All placeholder images will be overwritten and if the images are loaded slower than the user scrolls, blank spaces will occur. Thus, Loadeer.js doesn't enable native lazy loading by default.
Browser support for loading="lazy"
is decent. At the time writing, only Safari lacks support. If the option useNativeLoading
is set to true
and Loadeer.js detects the browser supports lazy loading, the loading
attribute will be set to lazy
and all data-src
attributes changed to src
. No intersection observer will be initialized.
Use the default selector:
1<img data-lazyload data-src="image.png" />
Or use the future-proof loading
attribute as selector:
1<img loading="lazy" data-src="image.png" />
Finally, change the default selector parameter for the latter case:
1const instance = new Loadeer('img[loading="lazy"]') 2instance.observe()
sizes
AttributeLoadeer.js supports setting the sizes attribute automatically, corresponding to the current size of your image – just set the value of data-sizes
to auto
.
The automatic sizes calculation uses the display width of the image.
1<img 2 data-lazyload 3 data-srcset="image-480w.jpg 480w, image-800w.jpg 800w" 4 data-sizes="auto" 5/>
You may pass an element or array of elements to the constructor as well:
1const root = document.querySelector('#app') 2const instance = new Loadeer(root) 3instance.observe()
See the API for all available options.
If you want to load the images before they appear, use the triggerLoad
method.
1const instance = new Loadeer()
2instance.observe()
3
4const coolImage = document.querySelector('.image-to-load-first')
5// Trigger the load before the image appears in the viewport
6observer.triggerLoad(coolImage)
Pass a onLoaded
function to either manipulate the loaded element or do anything else with it.
1function onLoaded(element) { 2 console.log('Lazily loaded element:', element) 3} 4 5const instance = new Loadeer('[data-lazyload]', { 6 root: document.querySelector('#app'), 7 rootMargin: '10px 0px', 8 threshold: 0.1, 9 onLoaded, 10}) 11 12instance.observe()
Both the rootMargin
and thresholds
options are passed to directly to the IntersectionObserver
and thus infer their respective types.
new Loadeer(selector, options: LoadeerOptions = {})
Selector
Defaults to [data-lazyload]
. Allowed types are every valid CSS selector string, an element, an array of elements, or a NodeListOf
elements:
1type LoadeerElement = HTMLImageElement | HTMLSourceElement | HTMLVideoElement 2 3type LoadeerInput<T extends HTMLElement> = 4 | string 5 | T 6 | T[] 7 | NodeListOf<T>
LoadeerOptions
Note: Every property is optional and will be set to its default value if not provided.
Option | Default | Type | Description |
---|---|---|---|
root | document | Element , Document , null , undefined | The container within elements will be lazily loaded. |
rootMargin | 0px | string , undefined | See IntersectionObserver rootMargin parameter. |
threshold | 0 | number , number[] , undefined | See IntersectionObserver threshold parameter. |
onLoaded | undefined | (element: HTMLElement) => void , undefined | Custom function to run after each image is loaded. |
useNativeLoading | false | boolean , undefined | Indicates if the native loading="lazy" attribute should be used (if supported by the browser). |
Loadeer.js does not hide elements from Google. The library detects whether the user agent is probably a bot or crawler and will load all images.
MIT License © 2021-2023 Johann Schopplich
No vulnerabilities found.
No security vulnerabilities found.