滚动条滚动到可视区域加载数据
实现功能:页面某版块,当滚动条滚动到该区域时加载数据,否则不加载,节省页面加载时间
思路:
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>
posted on 2012-07-02 15:46 judy_ma0605 阅读(641) 评论(0) 编辑 收藏 举报