Skip to content

tonygustafsson/metalsmith-native-lazy-loading

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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'],
        selector: '.article__content',
    })
);

That's all there is to it.

Options

Key Description default
pattern Pattern to select files to handle **/*.html
selector Css selector to refine image replacement. This is appended with img:not([loading])

About

A Metalsmith plugin that add browser native lazy loading of images

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published