Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webistomin/posthtml-lazyload
:sparkles: PostHTML plugin to add native lazyload attribute
https://github.com/webistomin/posthtml-lazyload
lazy-loading lazyload lazyload-images post-processing posthtml-lazyload
Last synced: 3 months ago
JSON representation
:sparkles: PostHTML plugin to add native lazyload attribute
- Host: GitHub
- URL: https://github.com/webistomin/posthtml-lazyload
- Owner: webistomin
- License: mit
- Created: 2019-07-07T15:39:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T07:33:54.000Z (about 2 years ago)
- Last Synced: 2024-10-04T17:42:23.540Z (4 months ago)
- Topics: lazy-loading, lazyload, lazyload-images, post-processing, posthtml-lazyload
- Language: JavaScript
- Homepage: https://mathiasbynens.be/demo/img-loading-lazy
- Size: 1020 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# posthtml-lazyload 
[![NPM][npm]][npm-url]
[![Deps][deps]][deps-url]
[![DevDeps][dev-deps]][dev-deps-url]
[![Build][build]][build-badge]
It is possible to natively lazy load content through the `loading="lazy"` attribute on images and iframes, and [it’s already possible](https://caniuse.com/#feat=loading-lazy-attr) on last 2 versions modern browsers except Safari. This plugin will do it for you!
Read more in [Addy Osmani Blog](https://addyosmani.com/blog/lazy-loading/).
**⭐️ Star me on GitHub — it helps!**
Before:
``` html
```
After:
``` html
```
## Demo
[**DEMO**](https://mathiasbynens.be/demo/img-loading-lazy)
If you are using Chrome lower than 76 make sure you turn on both the `Enable lazy frame loading` and `Enable lazy image loading` flags.
[**CAN I USE**](https://caniuse.com/#feat=loading-lazy-attr)
## Install
```npm
npm i posthtml-lazyload --save-dev
```
## Usage
### Gulp
```npm
npm i gulp-posthtml posthtml-lazyload --save-dev
```
```js
const gulp = require('gulp');
const postHTML = require('gulp-posthtml');
const postHTMLLazyLoad = require('posthtml-lazyload');
const config = () => ({
plugins: [
postHTMLLazyLoad({
loading: 'eager',
class: 'lazy',
}),
],
});
gulp.task('posthtml', () => gulp.src('./build/*.html')
.pipe(postHTML(config))
.pipe(gulp.dest('./build')));
```
### Webpack
```npm
npm i html-loader posthtml-loader posthtml-lazyload --save-dev
```
```js
module: {
rules: [
{
test: /\.html$/,
use: [
'html-loader',
{
loader: 'posthtml-loader',
options: {
plugins: [
require('posthtml-lazyload')({
loading: 'eager',
class: 'lazy',
})
]
}
}
]
}
]
}
```
## Options
| Option | Type | description | Possible subsets | Default value |
| ------ | ------ | ------ | ------ | ------ |
loading | `string` | Describes loading attribute. | `auto`, `eager`, `lazy` | `lazy` |
class | `string` | Class of the elements to load lazily | Any valid CSS class name | `lazyload` |
### Contributing
See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [contribution guide](CONTRIBUTING.md).
### License [MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/posthtml-lazyload.svg
[npm-url]: https://npmjs.com/package/posthtml-lazyload
[deps]: https://david-dm.org/posthtml/posthtml.svg
[deps-url]: https://david-dm.org/webistomin/posthtml-lazyload
[dev-deps]: https://david-dm.org/webistomin/posthtml-lazyload/dev-status.svg
[dev-deps-url]: https://david-dm.org/webistomin/posthtml-lazyload?type=dev
[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
[style-url]: http://standardjs.com/
[build]: https://github.com/webistomin/posthtml-lazyload/actions/workflows/ci.yml/badge.svg
[build-badge]: https://github.com/webistomin/posthtml-lazyload/actions/workflows/ci.yml