README
hexo-image-lazyload
hexo-image-lazyload is a plugin used to add images lazyload support for Hexo, improving loading performance a lot.
Images will start loading when they are about to show up in current viewport. (when the distance between browser bottom and images is within 0.5× browser window height)
Don't worry about lazyload SEO problem, because Google supports it already. we just Do nothing.
Install
$ npm install hexo-image-lazyload --save
Usage
First add configuration in _config.yml
from your hexo project.
lazyload:
enable: true
onlypost: true
strict_match: true
loading_image: # eg ./assets/images/loading.gif
onlypost
- If true, only the images from post or page will support lazy-load.
- If false, the whole images in your site will lazy-loading, including the images from your theme, but not including the background images from CSS style.
strict_match
- If true, only images with html tag
<img src="" alt>
will lazy-load. These tags are generally rendered by standard markdown image syntax![alt](src)
. - If false, all images will lazy-load.
loading_image
- 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, tranquilpeak and myself theme hexo-theme-twentyfifteen-wordpress, and yours I believe!
Enjoy it!
Demo
License
MIT