Posthtml-lazyload NPM

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`