引言 {#引言}

知识小课堂：图片加载方式有两种，一个是预加载，另一个就是懒加载，那你了解什么是预加载和懒加载吗？下面来学习一下。

参考：图片预加载与图片懒加载（缓载）的区别与实现

图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

预加载与懒加载的区别之处：
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。

使用说明 {#使用说明}

使用图片懒加载需要安装插件：hexo-lazyload-image
在站点根目录执行下面的命令：

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

之后在站点配置文件下添加下面的代码：

|-----------------|--------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 | lazyload: enable: true # 是否开启图片懒加载 onlypost: false # 是否只对文章的图片做懒加载 loadingImg: # eg ./images/loading.gif |

最后执行hexo clean && hexo g && hexo s就可以看到效果了。