Skip to content

QingpingMeng/gatsby-remark-images-native-lazy-load

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

gatsby-remark-images-native-lazy-load

What does this plugin do?

In you markdown text:

![altText](https://example.com/test.jpg)

Yields:

<img src="https://example.com/test.jps" alt="altText" loading="lazy">

What is the difference between this plugin and gatsby-remark-images?

gatsby-remark-images also has the support to add loading attribute, but it only works for local images, not images from external sources.

What is all about the loading attribute for img tag?

<img src="image.png" loading="lazy" alt="">

This image will be NOT loaded over the network until the viewport is approaching it.

This will significantly speed up your site loading if there are tons of images.

Here are the supported values for the loading attribute:

  • auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
  • lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
  • eager: Load the resource immediately, regardless of where it's located on the page.

What browsers are supporting this loading attribute?

It is already supported in Chrome 76 and later versions. It should be supported in any Chromium 76-based browser.

If the browser doesn't support this attribute, it will be ignored and images will load as usual.

Check it out here: https://caniuse.com/#search=loading%20lazy

How to use this plugin?

In your gatsby.config.js:

{
    resolve: `gatsby-transformer-remark`,
    options: {
        plugins: [
            {
                resolve: `gatsby-remark-images-native-lazy-load`,
                options: {
                    loading: "lazy" // "lazy" | "eager" | "auto"
                    }
                }
        ],
    },
}

Important: This plugin will turn images nodes to html nodes. Always put this plugin at the end of plugins array.

About

This is a plugin to add loading='lazy|eager|auto' property to image tag generated by gatsby-transformer-remark

Resources

Stars

Watchers

Forks

Packages

No packages published