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

    Install

    npm i netlify-plugin-lazy-load-images

    DownloadsWeekly Downloads

    6

    Version

    0.3.4

    License

    MIT

    Unpacked Size

    8.49 kB

    Total Files

    5

    Last publish

    Collaborators

    • manister