hexo-lazysizes

High performance and SEO friendly lazy loader using lazysizes for Hexo.

Installation

$ npm i hexo-lazysizes --save

Usage

In your hexo _config.yml file.

lazysizes:
  enable: true

The plugin has several options.

Options

lazysizes:
  enable: true
  loadingImage: /images/lazyloader.svg
  include_hostnames: ['buzzcat.com']
  exclude_images: ['logo.png']
  styleHelper: true
  respimg: true
  rias: true
  rias_provider: 'https://res.cloudinary.com/jettags/image/fetch/w_{width},f_auto,q_auto/'
  rias_base: 'https://buzzcat.com'

• enable - Enable hexo-lazysizes. Defaults to false.
• loadingImage - Add your own loading image.
• include_hostnames - Only images with these hostnames will be lazy loaded. (by default we will include all img src that begin with /).
• exclude_images - Some images dont play nice with lazy loading.
• styleHelper - Adds the simple css rule img[data-sizes="auto"] { display: block; width: 100%; }.
• respimg - Adds the respimg plugin.
• rias - Adds the rias plugin.
• rias_provider - Your remote image provider url (must include the {width} variable for auto sizes).
• rias_base - The base domain against which your rias provider will pull images.

The src will be generated from the rias_provider + rias_base + original img src. For example, using the above rias settings would create the following img src for /assets/img/exampleimage.png:

https://res.cloudinary.com/jettags/image/fetch/w_{width},f_auto,q_auto/https://buzzcat.com/assets/img/exampleimage.png

The work is done during hexo generate so don't forget:

hexo generate

TODO: iframe support, gallery support