最近发现自己的网站上不能访问siteA站点的图片了，是因为其对静态资源做了访问来源的限制，只有他们自己的网站才能访问。
不过他们的实现不严谨，只要稍加改动代码还是可能继续访问的，比如我在<img>标签中增加了一个属性。
为了减少siteA站点对我a的网站的厌恶性，在尊重对方的前提下又不影响内容的展示，决定在文章列表页中引用的静态图片新增懒加载功能。
即只有用户可见的图片才被浏览器加载，因为默认浏览器会加载页面中全部的图片，如果用户只看了文章的第一页就跳走，那么对于已经加载了第二页第三页的图片来说是浪费流量。
懒加载减少了一个页面同时对图片的大量请求，只对可见图片进行请求，不可见的图片不会请求。
Layui是开源模块化前端框架，它的懒加载模块作者是这样说的："应该说比当前市面上任何一个懒加载的实现都更为强劲和轻量，她用不足80行代码巧妙地提供了一个始终加载当前屏图片的高性能方案（无论上滑还是下滑）。对你的网站因为图片可能带来的压力，可做出很好的应对"
懒加载使用文档 https://www.layui.com/doc/modules/flow.html#lazyimg
语法：
html语法
<img lay-src="aaa.jpg">
<img src="bbb.jpg" alt="該图不会懒加载">
<img lay-src="ccc.jpg">
js语法
<script src="/layui/layui.js"></script>
<script>
layui.use('flow', function(){
var flow = layui.flow;
//当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
flow.lazyimg();
});
<script>
（完）