A plugin for Hexo lazyload imgeas, auto generate thumbs, medium-like effect
npm install hexo-lazyloadhexo-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
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:
``bash`
brew install imagemagick
brew install graphicsmagick
then, install this package:
`bash
$ npm install hexo-lazyload --save
// or
$ yarn add hexo-lazyload
`
First add configuration in _config.yml from your hexo project.
`yaml`
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.
`bash``
$ hexo clean && hexo g
- [x] lazy-load
- [x] medium effect
- [x] generate thumbnail(local & remote)
- [x] hash thumbnail name
- [x] custom thumbnail path