hexo-image-lazyload

A plugin used to add images lazyload support for Hexo, improving loading performance a lot.

Usage no npm install needed!

<script type="module">
  import hexoImageLazyload from 'https://cdn.skypack.dev/hexo-image-lazyload';
</script>

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

image

License

MIT