Skip to content

Latest commit

 

History

History
72 lines (48 loc) · 1.76 KB

readme.chinese.md

File metadata and controls

72 lines (48 loc) · 1.76 KB

hexo-lazyload | english doc

hexo-lazyload 是一个 hexo 插件,使用 IntersectionObserver API, 并附加了 polyfill, 在现代浏览器的环境下,要比传统 lazyload 写法具有更高性能。

特点:

  • 自动生成缩略图(150x150)(包括远程图片和本地图片)
  • 使用 IntersectionObserver API(自带polyfill)实现 lazyload
  • medium effect

安装

这个包依赖 gm 来生成缩略图,所以请先安装相关依赖 GraphicsMagick or ImageMagick。如果是 mac,可以使用以下命令:

brew install imagemagick
brew install graphicsmagick

然后,安装本 npm 包:

$ npm install hexo-lazyload --save

// or

$ yarn add hexo-lazyload

使用

首先在你的 hexo 项目下的 _config.yml 添加配置

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

thumbPath

  • 缩略图路径(绝对路径,根目录为 public/

loadingImg

  • 默认路径: '/js/lazyload-plugin/loading.svg'
  • 如果需要自定义,添填入 loading 图片地址,如果是本地图片,不要忘记把图片添加到你的主题目录下。

className

  • 默认会延迟加载文章中的所有图片。
  • 如果不为空,请填入 ID(带 # 号), 或 css 类名(带 . 号)【ps. hexo 和 markdown 语法支持 html 语法】

运行 hexo 命令

$ hexo clean && hexo g

Demo

robin-front.github.io

TODO

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