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 --saveUsage
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 gTest
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
BugFix
- Fixed the Fancybox compatibility issue
License
MIT
