netlify-plugin-lazy-load-images

0.3.4 • Public • Published

Netlify lazy load images plugin

Once site is built, this plugin replaces src and srcsets with inline placeholders and appends a script to lazy load the real sources when the images intersect with the viewport.

Most useful where large image content is added by a site admin through a wysiwyg, a richtext editor, or markdown.

An example of the plugin in action lives here: https://lazy-load-plugin-test.netlify.app/

Installation

To install, add the following lines to your netlify.toml file:

[[plugins]]
package = "netlify-plugin-lazy-load-images"

Note: The [[plugins]] line is required for each plugin, even if you have other plugins in your netlify.toml file already.

Configuration

# netlify.toml
[[plugins]]
  package = "."
    [plugins.inputs]
      excludeFiles = []
      applyContainer = "body"
      excludeElements = '[data-src], .lazy-load'
      replaceThreshold = 0

excludeFiles

Array. Array of glob patterns to exclude from processing by this plugin. Defaults to [].

excludeElements

String. CSS selector to match on elements to be excluded from lazy-loading. Defaults to selectors used in popular lazy-loading libraries. '.lazy, .lazy-load, [data-src]'

replaceThreshold

Number. Miniumum size in bytes for an image to be replaced by placeholder

Dependencies (6)

Dev Dependencies (15)

Package Sidebar

Install

npm i netlify-plugin-lazy-load-images

Weekly Downloads

21

Version

0.3.4

License

MIT

Unpacked Size

8.49 kB

Total Files

5

Last publish

Collaborators

  • manister