图片懒加载lazyload

问题原因：在新版的浏览器中，即使你删除了 Javascript 控制的 src 属性，浏览器仍然会去加载这个图像。

解决方法：直接修改 HTML 的结构，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。

例如：<img data-original=“img/example.jpg” src=“img/grey.gif”>

这样我们就需要先分析一下插件的优缺点，再决定是否要使用。

使用：

1. 必须按照这种结构才有实际作用，需要对输出进行定义。
2. 可以节约服务器资源，并且有较好的用户体验。
3. 如果图片很大，当用户滚动到目标位置，需要较长时间下载。

不使用：

1. 增加服务器压力，浪费系统资源。

究竟使用不使用，还是要看你自己的实际需求。如果你图片比较少，就不必使用了，如果你图片比较多，可以考虑一下。但是，使用的话，你可能需要把每一 个img 标签上自己加上这个属性，会稍微麻烦一点。潜行者m博客上，就用了这个插件，不过没用使用官方说的那种结构，要的只是一个缓冲加载的效果。

lazyload依赖与jquery。所以先引入jquery和lazyload

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片（img.lazy），执行lazyload();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script>
	$(function(){
		$("img.lazy").lazyload();
	})
</script>

        <div class="articleItem-img lazyload" style="background-image: url(__PUBLIC__/ruthWeb/img/jzzkc.jpg) ;background-repeat:no-repeat ;background-position:center ; background-size:cover ;" data-src="{{n.thumb}}">
            </div>
$(".lazyload").lazyload();