使用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加载效果：