PostHTML plugin to add native lazyload attribute
npm install posthtml-lazyload[![NPM][npm]][npm-url]
!npm
[![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 on last 2 versions modern browsers except Safari. This plugin will do it for you!
Read more in Addy Osmani Blog.
⭐️ Star me on GitHub — it helps!
Before:
`` html
src="http://posthtml.github.io/posthtml/logo.svg"
alt="PostHTML"
width="220"
heigth="200"
class="lazyload"
>
src="video-player.html"
class="lazyload"
>
`
After:
` html
src="http://posthtml.github.io/posthtml/logo.svg"
alt="PostHTML"
width="220"
heigth="200"
class="lazyload"
loading="lazy" <---
>
src="video-player.html"
class="lazyload"
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.
`npm`
npm i posthtml-lazyload --save-dev
`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')));
`
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` |See PostHTML Guidelines and contribution guide.
[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