https://github.com/1kohei1/gatsby-remark-lazy-load

This plugin lazy loads image processed by gatsby-remark-im ages plugin
https://github.com/1kohei1/gatsby-remark-lazy-load

Last synced: about 1 month ago
JSON representation

This plugin lazy loads image processed by gatsby-remark-im ages plugin

• Host: GitHub
• URL: https://github.com/1kohei1/gatsby-remark-lazy-load
• Owner: 1kohei1
• Created: 2019-04-14T23:23:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-09-21T06:36:49.000Z (about 5 years ago)
• Last Synced: 2024-10-01T15:59:51.102Z (about 2 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gatsby-remark-lazy-load

Lazyloads images processed by [gatsby-remark-images](https://www.gatsbyjs.org/packages/gatsby-remark-images/) with using [lazysizes](https://www.npmjs.com/package/lazysizes)

The plugin makes lazyload possible by:

* Move `src` and `srcset` to `data-src` and `data-srcset` respectively.

* Add class `lazyload` to `img` tag.

[lazysizes](https://www.npmjs.com/package/lazysizes) has to be installed to make this plugin work.

## Install

`npm install --save gatsby-remark-lazy-load`

`npm install --save lazysizes`

## How to use

```js

// In your gatsby-config.js

plugins: [

  {

    resolve: `gatsby-transformer-remark`,

    options: {

      plugins: [

        {

          resolve: `gatsby-remark-images`,

        },

        `gatsby-remark-lazy-load`,

      ]

    }

  }

]

```

```js

// In your gatsby-browser.js

import 'lazysizes'

```

## Contribution

This is a minimum plugin. Please make an issue when you need more functionalities or code doesn't work!