使用jQuery实现图片的懒加载

       敲了一天的jQuery，感觉自己要疯了，头疼的不行，于是，去你的吧，找些有意思的事情做吧，在网上翻啊翻啊，看到一篇关于图片懒加载的介绍，好吧，相对于学习jQuery实战，这个要有趣的多，于是实现了下，以下是过程。

       首先为啥要用懒加载，不懒我勤快点不行吗？你当然可以，可是在网页上，常常要用到图片，而图片需要消耗较大的流量，正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载<img src="xxx">的图片标签，如果页面很长，隐藏在页面下方的图片已经被浏览器加载，如果用户不向下浏览，没有看到已加载的图片，图片就相当于白浪费了流量。

        所以淘宝，京东等流量十分巨大的电商，需要使用大量的图片，因此，这些图片都是按需加载，就是用户滚动条滚到哪里，哪里就加载，没有滚到的地方不需要加载，这就是懒加载。

         懒加载的原理就是在输出HTML的时候，不要直接输出<img src="xxx">，而是输入如下标签：

<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">         在没有加载的时候显示的一个gif的加载动画，当页面滚动到图片的时候就利用jQuery把img的src属性替换为data-src的内容，浏览器就会实现实时加载。
         代码如下（仿照百度图片的页面）：

        首先要在HTML中载入jQuery和underscore

<script type ="text/javascript" src="js/jquery-3.3.1.js"/>
</script>
<script type ="text/javascript" src="js/underscore.js"/>
</script>      并且添加图片，按照如下格式
  <img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">      js代码：
$(function(){
//获取window的应用
var $window=$(window);
//获取包含data-src属性的img，并以jQuery对象存入数组
var lazyImgs=_.map($('img[data-src]').get(),function(i){
return $(i);
});
var onScroll=function(){
var wtop=$window.scrollTop();
if (lazyImgs.length>0){
//获取页面高度
var wheight=$window.height();
var loadeIndex=[];
//循环数组的每个img元素
_.each(lazyImgs,function($i,index){

if ($i.offset().top - wtop<wheight){
$i.attr('src',$i.attr('data-src'));
//添加待删除的数组
loadeIndex.unshift(index);

}
});
//删除已处理的数组
_.each(loadeIndex,function(index){
lazyImgs.splice(index,1);
});
}
};
//绑定
$window.scroll(onScroll);
onScroll();
});    我们用IE看下效果：
    先是没有使用js的HTML加载效果：



使用了js的HTML加载效果：