Wondering what’s next for npm?Check out our public roadmap! »

    metalsmith-native-lazy-loading

    0.9.4 • Public • Published

    Metalsmith Native Lazy Loading

    What is Metalsmith?

    It's a great static site generator that is often used to create HTML from Markdown and other markup languages.

    More info: https://metalsmith.io/

    Why this plugin?

    There are other plugins that adds lazy loading to images, but this one uses the simplest approach - browser native image lazy loading. From this:

    <img src="img/my-image.jpg" alt="MyAlt" title="MyTitle">
    

    To this:

    <img loading="lazy" src="img/my-image.jpg" alt="MyAlt" title="MyTitle">
    

    Check browser compability: https://caniuse.com/loading-lazy-attr

    How to install

    npm install --save-dev metalsmith-native-lazy-loading

    How to use

    Add this to the top:

    var imageLazyLoading = require('metalsmith-native-lazy-loading');

    You then use it like so;

    Metalsmith(__dirnam).use(
        imageLazyLoading({
            pattern: ['**/*.html'],
        })
    );

    That's all there is to it.

    Keywords

    none

    Install

    npm i metalsmith-native-lazy-loading

    DownloadsWeekly Downloads

    1

    Version

    0.9.4

    License

    ISC

    Unpacked Size

    3.05 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar