https://github.com/felipeqq2/eleventy-plugin-lazyload

An Eleventy plugin that lazyloads images using the 'loading' attribute
https://github.com/felipeqq2/eleventy-plugin-lazyload

11ty eleventy eleventy-plugin lazy-loading

Last synced: 4 months ago
JSON representation

An Eleventy plugin that lazyloads images using the 'loading' attribute

• Host: GitHub
• URL: https://github.com/felipeqq2/eleventy-plugin-lazyload
• Owner: felipeqq2
• License: mit
• Created: 2021-03-30T12:14:48.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-06T04:45:58.000Z (4 months ago)
• Last Synced: 2024-10-07T23:11:06.016Z (4 months ago)
• Topics: 11ty, eleventy, eleventy-plugin, lazy-loading
• Language: JavaScript
• Homepage:
• Size: 630 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lazyload images ([Eleventy](https://11ty.dev/) plugin)

This plugin searches for `` tags and adds the attribute `loading="lazy"` to improve web performance without adding external scripts😎; you can deactivate it in a per-image basis adding the attribute `loading="eager"` (it is advised to do this with images that are in the first visible viewport).

The attribute is better explained [here](https://web.dev/browser-level-image-lazy-loading/), and it's supported on [most browsers](https://caniuse.com/loading-lazy-attr).

## Getting started

Install the package:

```bash

npm install --save-dev eleventy-plugin-lazyload

# or:

yarn add --dev eleventy-plugin-lazyload

```

Then update your Eleventy configuration file (usually `.eleventy.js`):

```js

const lazyloadPlugin = require('eleventy-plugin-lazyload')

module.exports = function (eleventyConfig) {

	eleventyConfig.addPlugin(lazyloadPlugin, {

		alt: false, // if enabled, adds an empty alt attribute on images that don't have it

	})

}

```

## License

This project is licensed under the [MIT license](./LICENSE)