homework/孙红照/mission29/demo3.html

<!DOCTYPE html>
<html>
<head>
	<title>demo loadmore</title>
	<meta charset="utf-8">
	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js
"></script>
	<style type="text/css">
		* {
			text-align: center;
		}
		.box {
			border: 1px solid #ccc;
			padding: 10px;
			margin: 10px;
		}
		.box:hover {
			background-color: green;
		}
		.btn {
			border: 1px solid #e27272;
			border-radius: 2px;
			color: #e27272;
			padding: 10px;
			margin: 10px;
			display: inline-block;
			cursor: pointer;
			width: 64px;
			height: 18px;
			text-align: center;
		}
		.btn img {
			width: 18px;
		}
	</style>
</head>
<body>
<div class="ct">
	<div class="box">内容1</div>
	<div class="box">内容2</div>
</div>
<a class="btn">加载更多</a>
<script type="text/javascript">
	var $loadMoreBtn = $(".btn");
	var clock;
	loadMore($loadMoreBtn);

	$(window).on("scroll", function(event){
		if (clock) {
			clearTimeout(clock);
		}
		clock = setTimeout(function(){
			if (!isVisible($loadMoreBtn)) {
				console.log(111);
				return;
			}
			loadMore($loadMoreBtn);
		},500);
	})


	function isVisible($node){
		var offsetH = $node.offset().top;
		var winH = $(window).height();
		var scrollH = $(window).scrollTop();
		if (offsetH < winH +scrollH) {
			return true;
		} else {
			return false;
		}
	}


	function loadMore($node){
		var nowLength = $(".ct").children().size();
		if($(this).data("isLoading")){
			return;
		}

		$node.data("isLoading", true).html('<img src="loading.gif">');
		$.ajax({
			url: "demo3.php",
			dataType: "json",
			type: "get",
			data: {
				start: (nowLength+1),
				len: 20
			},
			success: function(json){
				onSuccess(json);
			},
			error: function(){
				onError();
			}
		});

		function onSuccess(json){
			if (json.status === 1){
				for(var i=0;i<json.data.length;i++){
					$(".ct").append('<div class="box">' + json.data[i] + '</div>');
				}
				$node.data("isLoading", false).text("加载更多");
			} else {
				$node.data("isLoading", false).text('加载更多');
				alert("加载失败，服务器原因");
			}
		}

		function onError(){
			$this.data("isLoading", false).text('加载更多');
			alert("加载失败，网络原因");
		}
	};
</script>

</body>
</html>