homework/朱瑞/jinjie16/jinjie16_1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片懒加载</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
ul,li{
	list-style:none;
}
.container{
	width: 800px;
	margin: 0 auto;
}
.container li{
	float:left;
	margin:10px 10px;
}
.container li img{
	width: 220px;
	height: 400px;
}
p{
	float: left;
}
.container:after{
	content:"";
	display: black;
	clear: both;
}


</style>
</head>
<body>
	<ul class="container">
		 <li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>	
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>	
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><p id="hello">Hello</p></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>	
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>	
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
		<li><a href="javascript:;"><img src="" data-src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/girl.jpg"></a></li>
	</ul>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
	/*var img = document.querySelector("img");
	console.log(img+"...");
	url = img.getAttribute("data-src");
	console.log(url+"...");
	//把图片的真实url放在data-src中，
	//当图片进入到可视区域时,把data-src赋给src.
	img.setAttribute("src",url);*/

	//var a=0;

	/*$(window).on("scroll",function(){
		//检查所有图片，如果某个图片展示了，那么加载这个图片
		$(".container img").not('.load').each(function(){
			a++;
			console.log(a);
			if(isShow($(this))){
			   showImg($(this));
			}
		});
	});*/
	check();

	$(window).on('scroll',check);

	function check(){
		$('img').not('.load').each(function(){
			if (isShow($(this))) {
				showImg($(this));
			}
		});
	}

	/*function showImg($img){
		var imgUrl = $img.attr("data-src");
		$img.attr("src",imgUrl);
	}*/
	function showImg($imgs){
	$imgs.each(function(){
	    var imgUrl = $(this).attr('data-src');
	    $(this).attr('src',imgUrl);
	    $(this).addClass('load');
	});
	}

	function isShow($node){
	console.log('llj');
	var windowHeight = $(window).height(),
		scrollTop = $(window).scrollTop(),
		offsetTop = $node.offset().top,
		nodeHeight = $node.height();
		if (windowHeight+scrollTop>offsetTop && scrollTop<(offsetTop+nodeHeight)){
			return true;
		}else{
			return false;
		}
	}
	//console.log(isShow($("#hello")));
	//console.log(isShow($("#hello")));
	//console.log($("img").eq(0));
	//showImg($("img"));

</script>
</body>
</html>