Package Exports

hexo-lazyload

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hexo-lazyload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

thumb path relative to 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