posthtml-lazyload

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>

Demo

DEMO

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

Install

npm i posthtml-lazyload --save-dev

Usage

Gulp

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')));

Webpack

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',
               })
            ]
          }
        }
      ]
    }
  ]
}

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 and contribution guide.

License MIT