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: 3 months 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 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-21T06:36:49.000Z (almost 6 years ago)
- Last Synced: 2025-04-13T09:05:52.633Z (3 months ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 3
- Watchers: 0
- 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!