摘要：世间也需要没用的东西，如果一切事物都必须有其意义，会让人喘不过气来。 —是枝裕和-

参考文章：前端必会的图片懒加载(三种方式)

实现原理

首先让页面中的所有图片的地址指向同一张用于表示加载中的图片，在监听窗口视角，当滑动到该图片时，修改该图片的指向地址为正确的地址

针对jekyll网站

参考文章： Image loading optimization for Jekyll and GitHub Page

引入组件lozad.js

npm install --save lozad

编辑图片加载逻辑

首先创建一个专门用于显示img图片的html文件 _include/img.html

 if include.src 
   capture img_src /assets/images/ include.src  endcapture 
  <img data-src="img_src | relative_url" class="lozad" alt="include.alt | default: ''" />
endif

初始化lozad.js

<!-- 引入图片懒加载 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.js"></script>
<script>

const observer = lozad();
observer.observe();
</script>

之后再markdown中引入img图片时可以使用以下写法

 include img.html src="image-optimization/IMG_2354.JPG" alt="我的图片"