Hexo博客实现图片lazyload

lazy

随着博客的一次又一次优化,在功能越发强大、界面越发美观的同时,加载速度却也受到了不小的影响。而导致这个问题的关键很多时候在于图片的加载。

Lazyload介绍

很多大型网站解决图片加载都是使用lazyload,只有滚动到可视区域时才去请求资源,即只展示用户所看到部分的图片而非一次性加载所有图片。这样就能在一定程度上减少服务端的请求,也能加快主体文字内容的加载速度。

Lazyload的实现原理说起来还是比较简单的。图片的加载是由src值引起,对src赋值时浏览器就会开始请求资源,所以我们可以利用HTML5中的data-xxx来保存图片的路径,当我们需要加载图片的时候就将data-xxx的值赋予src,于是就实现了图片的按需加载。

实现Lazyload

在Hexo的众多插件中已经出现了一款能够极为方便地支持Lazyload的插件——hexo-lazyload-image。

这是该插件的github项目地址:https://github.com/Troy-Yang/hexo-lazyload-image

这款插件的使用方法十分简单:

1、安装

在站点根目录下,执行以下命令:

1
$ npm install hexo-lazyload-image --save

2、更改站点配置文件

打开站点配置文件,增加以下内容:

1
2
3
4
lazyload:
enable: true
onlypost: false
loadingImg: # eg /images/loading.gif

其中,onlypost如果为true,那么只有post和page中的图片支持lazyload;如果为false,那么站点中的所有图片将支持lazyload。

loadingImg用来自定义图片加载时所显示的图片,如果为空,将使用默认的图片。

3、生成并发布

接下来就可以发布了

1
$ hexo d -g

实现效果可以查看本站所有有图片的页面。

NexT主题自带Lazyload

NexT主题有自带的图片Lazyload标签:

1
{% lazyimage /path/to/image, alt, title %}

或简写

1
{% li /path/to/image, alt, title %}

最后更新于18-09-02
助力本站发展