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.
$ npm install hexo-lazyload-image --save
First add configuration in
_config.yml from your hexo project.
lazyload:enable: trueonlypost: falseloadingImg: # eg ./images/loading.gif
- 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.
- 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
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!
- Fixed the Fancybox compatibility issue