@notiz/scully-plugin-lazy-images

    0.5.0 • Public • Published

    scully-plugin-lazy-images

    npm version

    scully-plugin-lazy-images is a postRenderer plugin for Scully turning your images into lazy loading images using lazyload. This will replace the src attribute with data-src and adds the class lazyload to the img tag.

    The content around an image changes after the image is lazily loaded. To prevent the content to "jump" after loading, the height and width of the image is calculated and a placeholder svg is added to the src attribute with the image dimensions. The svg placeholder is replaced with the actual image after it is loaded.

    A browser native approach would be to use loading="lazy" for each img tag. When it has broader browser support we will switch to the native approach.

    📦 Installation

    To install this plugin with npm run

    $ npm install @notiz/scully-plugin-lazy-images --save-dev
    

    Usage

    Add the plugin to the defaultPostRenderers in your scully.config:

    require("@notiz/scully-plugin-lazy-images");
    
    exports.config = {
      projectRoot: "./src/app",
      defaultPostRenderers: ["lazyImages"],
      routes: {}
    };

    If you want to use the plugin for a specific route do:

    require('@notiz/scully-plugin-lazy-images');
    
    exports.config = {
      ...
      routes: {
        '/blog/:slug': {
          type: 'contentFolder',
          slug: {
            folder: './content/blog'
          },
          postRenderers: ['lazyImages']
        }
      }
      ...
    };

    Install

    npm i @notiz/scully-plugin-lazy-images

    DownloadsWeekly Downloads

    68

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    5.45 kB

    Total Files

    4

    Last publish

    Collaborators

    • garygrossgarten
    • marcjulian