【记录】Matery主题添加图片懒加载

2020.09.01 测试图片显示不出来，问了下度娘是因为跟豆瓣插件不兼容，而且还没有很好的解决办法，所以我就停了。

hexo-lazyload-image需要安装插件才能使用

安装：

npm install hexo-lazyload-image --save

安装完插件就可以在博客配置文件（_config.yml）添加以下代码：

#loading-image
lazyload:
  enable: true
  onlypost: false
  loadingImg: /medias/loading.gif

打开 Hexo根目录 >node_modules > hexo-lazyload-image > lib > simple-lazyload.js 文件

第 9 行修改为：

&& rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)

作用就是提前 240 个像素加载图片；当然这个值也可以根据自己情况修改

matery主题存在的问题

matery主题和hexo-lazyload-image插件有个BUG，查看大图，发现全部为 loading 加载图，

原因是因为懒加载插件与 lightgallery 插件冲突，解决办法如下：

修改主题文件下的 matery.js，在 108 行左右添加以下代码：

$(document).find('img[data-original]').each(function(){ 	$(this).parent().attr("href", $(this).attr("data-original")); });

这样就算大功告成！

可以查看我的博客效果，我也是初次使用hexo-lazyload-image插件，可能有些BUG，如果有就慢慢修吧！