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:
<img
src="http://posthtml.github.io/posthtml/logo.svg"
alt="PostHTML"
width="220"
heigth="200"
class="lazyload"
>
<iframe
src="video-player.html"
class="lazyload"
>
</iframe>After:
<img
src="http://posthtml.github.io/posthtml/logo.svg"
alt="PostHTML"
width="220"
heigth="200"
class="lazyload"
loading="lazy" <---
>
<iframe
src="video-player.html"
class="lazyload"
loading="lazy" <---
>
</iframe>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 i posthtml-lazyload --save-dev
npm i gulp-posthtml posthtml-lazyload --save-dev
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 i html-loader posthtml-loader posthtml-lazyload --save-dev
module: {
rules: [
{
test: /\.html$/,
use: [
'html-loader',
{
loader: 'posthtml-loader',
options: {
plugins: [
require('posthtml-lazyload')({
loading: 'eager',
class: 'lazy',
})
]
}
}
]
}
]
}| 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent