Complemento lazyImages

Visión General

scully-plugin-lazy-images es un complemento postRenderer para Scully que cambia tus imágenes a modo de carga lazy usando lazyload. Reemplazará el atributo scr por data-src y le agrega la clase lazyload al tag img.

Un enfoque nativo del navegador sería usar loading="lazy" para cada etiqueta img.

A browser native approach would be to use loading="lazy" for each img tag. Cuando se tenga mejor soporte de los navegadores se cambiará de enfoque.

Instalación

Para instalar este complemente con npm ejecuta:

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

Uso

Agrega el complemento a defaultPostRenderers en tu archivo scully.config:

Copyrequire('@notiz/scully-plugin-lazy-images');

exports.config = {
  projectRoot: './src/app',
  defaultPostRenderers: ['lazyImages'],
  routes: {},
};

Si quieres usar el complemento en una ruta específica, utiliza:

Copyrequire('@notiz/scully-plugin-lazy-images');

exports.config = {
  ...
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: './content/blog'
      },
      postRenderers: ['lazyImages']
    }
  }
  ...
};