Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including hexo-lazyload-image with all npm packages installed. Try it out:

var hexoLazyloadImage = require("hexo-lazyload-image")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

hexo-lazyload-image v1.0.4

a hexo plugin which is used to have all images support lazyload, with the help of this functionality, it will improve lots of the loading proformance.

hexo-lazyload-image

hexo-lazyload-image is a hexo plugin which is used to have all images support lazyload automatically. With the help of this functionality, it will improve lots of the loading proformance..

All the lazy-load images only shows up when they are within current viewport.

Don't worry about lazyload SEO problem, because Google supports it already. we just Do nothing.

Install

$ npm install hexo-lazyload-image --save

Usage

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

lazyload:
  enable: true 
  onlypost: false
  loadingImg: # eg ./images/loading.gif

onlypost

  • If true, only the images from post or page will support lazy-load.
  • If false, the whole images of your site will use lazy-load, including the images dist from your theme, but not including the background images from CSS style.

loadingImg

  • If you keep the value nothing (by default), then it will use the default loading image.
  • If you want to customize the image, then you need to copy your loading image to your current theme image folder and then change this path to find it.

Run hexo command.

$ hexo clean && hexo g

Test

I've test it manually with some popular themes like landscape(official), material, next, jacman and myself theme hexo-theme-twentyfifteen-wordpress, and yours I believe!

Enjoy it!

Demo

troyyang.com

image

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free