實現功能:頁面某版塊,當滾動條滾動到該區域時加載數據,否則不加載,節省頁面加載時間
思路:
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>