hexo-lazyload

hexo-lazyload | 中文文档

hexo-lazyload is a hexo plugin which is use IntersectionObserver api to improve the performance of lazy-load images.

feature:

• auto generate thumbnail（include remote image and local image）
• use IntersectionObserver api(with polyfill if browsers not support) for lazyload
• medium effect

Getting started

This package rely on gm to generate thumbnail, so first download and install GraphicsMagick or ImageMagick. In Mac OS X, you can simply use Homebrew and do:

brew install imagemagick
brew install graphicsmagick

then, install this package:

$ npm install hexo-lazyload --save
 
// or
 
$ yarn add hexo-lazyload

Usage

First add configuration in _config.yml from your hexo project.

lazyload:
  enable: true
  # thumbPath: '/images/thumb' 
  # className: #optional e.g. .J-lazyload-img 
  # loadingImg: #optional eg. /images/loading.png 

thumbPath

• absolute thumb path ,root dir is public/, default: /images/thumb

loadingImg

• default: '/js/lazyload-plugin/loading.svg'
• If you want to customize the image, just fill the path. don't forget to copy the image to your themes folder.

className

• by default, lazy-load all post images.
• if not null, only lazy-load the images with this className(with '#' for ID or '.' for className). (P.S. hexo && markdown support html syntax.)

Run hexo command.

$ hexo clean && hexo g

Demo

robin-front.github.io

TODO

• lazy-load
• medium effect
• generate thumbnail(local & remote)
• hash thumbnail name
• custom thumbnail path