js延时加载实现

实现原理：将img标签里的src属性设为同一张空白图片（封面图片），再自定义一个属性，属性值为图片的真实路径，通过js监听图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。其中用了淡入淡出增加了效果。

下面是一个简单的样式布局

  *{padding: 0;margin: 0;}
		ul{width:828px;margin: 50px auto;}
		li{list-style: none;float: left;width: 264px;height: 198px;margin-right: 10px;margin-bottom: 15px;border: 1px solid red;}
		img{width: 264px;height: 198px;}

  <ul>
			<li><img src="img/loading2.jpg" data-img="imgs/1.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/13.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/14.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/15.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/2.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/22.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/23.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/27.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/28.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/29.jpg"/></li>
			<li><img src="img/loading2.jpg" data-img="imgs/3.jpg"/></li>
		</ul>

js部分，也有jquery的

<script type="text/javascript">
				(function(){
					var arr = []
					window.onload = window.onscroll = function(){
						if(window.cFlag) return
						var $imgs = $("img[src]")
//						获取可视窗口高度
						var WH = window.innerHeight || document.documentElement.clientHeight
//						获取滚动条高度
						var ST = document.body.scrollTop ||document.documentElement.scrollTop
//						遍历图片
						for(var i=0,len=$imgs.length;i<len;i++){
//							获取图片高度
							var imgTop = $imgs[i].offsetTop
//							做判断
							if(!$imgs[i].flag && imgTop < WH + ST ){
								(function(index){
									$($imgs[index]).fadeOut(function(){
										var data_img = $imgs[index].getAttribute("data-img")
										$imgs[index].setAttribute("src",data_img)
									}).fadeIn()
								})(i)
								
//								设置标识
								$imgs[i].flag = true
								arr.push()
							}
						}
						if(arr.length == $imgs.length){
							window.cFlag = 1
						}
					}
				})()
</script>