实现功能:页面某版块,当滚动条滚动到该区域时加载数据,否则不加载,节省页面加载时间
思路:
1 判断是否进入可视区域
2 加载数据,服务器端返回已经绑定好的repeater,相应样式加好
3 注意一点,加一个开关,当ajax请求成功后,关闭,防止不停的无限的循环加载,优化,进入ajax就设置开关
<html>
<head>
<title>进入可视区域</title>
<script type="text/javascript" src="/scripts/jquery/jquery1.4.2.js"></script>
<script type="text/javascript">
$(function () {
var isload = true;
$(window).scroll(function () {
var fold = $(window).height() + $(window).scrollTop();
if (fold > $("#dvh").offset().top && isload) {
$.ajax({
type: "GET",
url: '/test.aspx?r=' + Math.random(),
cache: false,
dataType: "html",
beforeSend: function(XMLHttpRequest){
isload = false;
},
success: function (data) {if (data != "") {
$('#dvh2').html(data);
$("#dv").css("display", "block");
var likeErr = $('#getInErr').val();
if (likeErr == "false") {
$('#dvh2').val = $('#getIn').val();
}
}
},
error: function(){
isload = false;
}
})
}
});
}
)
</script>
</head>
<body>
<div id="dvlong" style="height:1600px;width:300px;background-color:Blue;">aaaaaaa</div>
<div id="dvh" style="height:100px;width:200px;background-color:Green; " ></div>
<div id="dvh2" >
</div>
<div></div>
</body>
</html>