Gathering detailed insights and metrics for @sitelintcode/improved-attribute-lazy-loading
Gathering detailed insights and metrics for @sitelintcode/improved-attribute-lazy-loading
Installations
npm install @sitelintcode/improved-attribute-lazy-loadingDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
21.4.0
NPM Version
10.2.4
Score
64.8
Supply Chain
96.2
Quality
75.7
Maintenance
100
Vulnerability
80.8
License
Releases
7
Contributors
1
Unable to fetch Contributors
Languages
2
JavaScript
TypeScript
JavaScript (50.19%)
TypeScript (49.81%)
Developer
sitelint
Download Statistics
Total Downloads
1,030
Last Day
3
Last Week
3
Last Month
14
Last Year
206
GitHub Statistics
18 Commits
1 Watching
1 Branches
1 Contributors
Maintainers
1
Package Meta Information
Latest Version
0.1.0
Package Id
@sitelintcode/improved-attribute-lazy-loading@0.1.0
Unpacked Size
30.18 kB
Size
9.49 kB
File Count
6
NPM Version
10.2.4
Node Version
21.4.0
Publised On
13 Dec 2023
Total Downloads
Cumulative downloads
Total Downloads
1,030
Last day
0%
3
Compared to previous day
Last week
50%
3
Compared to previous week
Last month
600%
14
Compared to previous month
Last year
-75%
206
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
36
@alex_neo/jest-expect-message@types/jest@types/jsdom@types/node@types/sharp@typescript-eslint/eslint-plugin@typescript-eslint/parserbootstrapchokidar-clicopyfilesdpdmeslinteslint-clieslint-plugin-importeslint-plugin-markdownhtml-loaderhuskyjestjest-environment-jsdommarkdownlint-clirelease-itrolluprollup-plugin-commonjsrollup-plugin-dtsrollup-plugin-htmlrollup-plugin-jsonrollup-plugin-minificationrollup-plugin-node-resolverollup-plugin-typescript2rollup-plugin-visualizershelljs-nodeclishxstandard-versiontypescripttypescript-eslintwebpack-bundle-analyzer
Versions
Improving attribute lazy loading
Optimizing lazy loading for image, video, and audio that includes time visibility in the viewport. In other words, if the image, video, audio is not minimum 1 second in the browser viewport then don't load it.
Features
- Set
preloadattribute value on<video>or<audio>element once it's in the viewport. - Load the image
<img>,<video>or<audio>when it's visible for at least 1 second in the viewport. This will prevent fetching the image while the user scrolls fast through the page. - Pause and resume automatically playing
<video>or<audio>when it's not in the viewport. This is configurable.
Settings
Automatically play and pause depending on the visibility in the viewport
For scenarios where you want to play video automatically when it's in the viewport and pause when it's outside of the viewport, you may use data-media-autoplay="true" and data-media-autopause="true".
1<video src="video/ljubljana-in-4k.mp4" data-media-autoplay="true" data-media-autopause="true" loop muted preload="none" poster="video/ljubljana-in-4k.thumbnail.jpg"></video>
Demo
Improving attribute lazy loading
Benefits
- For
<audio>and<video>elements this will help to avoid preloading the whole media file or metadata only. - For
<img>element this will help to fetch the image only when it's visible within the viewport for more than 1 second. There is no need to fetch the image while the user scrolls fast the page.
Getting started
NPM
1npm install @sitelintcode/improved-attribute-lazy-loading --save
HTML
Example code with minimum requirements.
1<audio preload="none" data-preload="metadata"></audio> 2<video preload="none" data-preload="metadata"></video> 3<img loading="lazy">
TypeScript
Following options are available:
timeout: number, default:1000(in ms). Set the timeout after which visibility should be checked.cssSelector: string, default:audio, img[loading="lazy"], videodebug: boolean, default:false. Settings it totruewill help to set event listeners:play,pauseto each media element so you can track it's state when they are in the viewport or outside.
1import { ImprovedAttributeLazyLoading } from '@sitelintcode/improved-attribute-lazy-loading'; 2 3const improvedAttributeLazyLoading: ImprovedAttributeLazyLoading = new ImprovedAttributeLazyLoading(); 4 5improvedAttributeLazyLoading.install(timeout, cssSelector);
Browser environment
Note that options passed to method install are the same as above.
1<script src="https://cdn.jsdelivr.net/npm/@sitelintcode/improved-attribute-lazy-loading@0.0.1/dist/improved-attribute-lazy-loading.js"></script> 2<script> 3(function() { 4 const improvedAttributeLazyLoading = new window.sitelint.ImprovedAttributeLazyLoading(); 5 improvedAttributeLazyLoading.install(); 6}()) 7</script>
Notes
Note the version number in the jsdelivr URL: 0.0.1. Don't forget to set desired version. You may check releases: https://github.com/sitelint/improved-attribute-lazy-loading/releases
Worth to mention that jsdelivr suggests:
Omit the version completely or use latest to load the latest one (not recommended for production usage).
Technical
import { terser } from "rollup-plugin-terser";was replaced withimport { terser } from "rollup-plugin-minification";becauserollup-plugin-terseris not compatible with Rollup 3.x version. See: https://github.com/TrySound/rollup-plugin-terser/issues/119
Contributing
Contributions are welcome, and greatly appreciated! Contributing doesn't just mean submitting pull requests. There are many different ways for you to get involved, including answering questions on the issues, reporting or triaging bugs, and participating in the features evolution process.
License
MOZILLA PUBLIC LICENSE, VERSION 2.0
No vulnerabilities found.
No security vulnerabilities found.