Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

posthtml-lazyload

1.0.7 • Public • Published

posthtml-lazyload

NPM npm Deps DevDeps Build

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 us 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

Install

npm i posthtml-lazyload

DownloadsWeekly Downloads

2

Version

1.0.7

License

MIT

Unpacked Size

24.7 kB

Total Files

28

Last publish

Collaborators

  • avatar