Get unlimited public & private packages + team-based management with npm Teams.Learn more »

hexo-lazyload-image

1.0.6 • Public • Published

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.

specify no-lazy for specify image

we can also disable the lazy process if specify a attribute on img tag in both markdown or html

<img no-lazy src="abc.png" />

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

BugFix

  • Fixed the Fancybox compatibility issue

License

MIT

Install

npm i hexo-lazyload-image

DownloadsWeekly Downloads

129

Version

1.0.6

License

ISC

Unpacked Size

12.6 kB

Total Files

11

Last publish

Collaborators

  • avatar