posthtml-lazyload

    1.0.10 • 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 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

    Install

    npm i posthtml-lazyload

    DownloadsWeekly Downloads

    2

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    25.6 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar