页面滚动加载例子

最新推荐文章于 2021-06-03 14:59:12 发布

huang100qi

最新推荐文章于 2021-06-03 14:59:12 发布

阅读量576

点赞数

本文链接：https://blog.csdn.net/huang100qi/article/details/52496203

版权

<html>
<body>
<div id="div1" frame_id='frame1'>
<iframe id='frame1' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<div id="div2" frame_id='frame2'>
<iframe id='frame2' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<div id="div3" frame_id='frame3'>
<iframe id='frame3' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<div id="div4" frame_id='frame4'>
<iframe id='frame4' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<div id="div5" frame_id='frame5'>
<iframe id='frame5' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//需加载的初始页面集合，加载后从此集合中去除避免重复加载
var d1 = document.getElementById("div1");
var d2 = document.getElementById("div2");
var d3 = document.getElementById("div3");
var d4 = document.getElementById("div4");
var d5 = document.getElementById("div5");
var div_arr = [d1, d2, d3, d4, d5];
loadFrame();
var itv;
$(window).scroll(function(){
clearTimeout(itv);
itv = setTimeout(loadFrame(),500);
});
function loadFrame(){
$("div[id^='div']").each(function(i){
var div_id = $(this).attr('id');
var load_id = $(this).attr('frame_id');
var id_index = i+1;
//已经加载过的不再加载
if(isContained(div_id)) {
var oTop = $(this).offset().top;
var scrolltop = $(window).scrollTop();
var winHeight = $(window).height();
//alert("oTop="+oTop+" \n" + "scrolltop="+scrolltop+" \n" + "winHeight="+winHeight+" \n" );
if((oTop-scrolltop)>0 && (oTop-scrolltop)<winHeight){
var frame_src = $("#"+load_id).attr("data_src");
$("#"+load_id).attr("src",frame_src);
deleteElement(div_id);
}
}
});
}
//删除已经加载的记录
function deleteElement(id) {
for(var i=0; i<div_arr.length; i++) {
if(div_arr[i]!=undefined && div_arr[i].id == id) {
delete div_arr[i];
return;
}
}
}
//判断未加载列表是否包含当前对象
function isContained(id) {
var result = false;
$.each(div_arr, function(i, n) {
if(n!=undefined && n.id == id) {
result = true;
}
});
return result;
}
</script>
</body>
</html>

huang100qi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面滚动加载例子

"div1" frame_id='frame1'> 'frame1' data_src="http://www.baidu.com" style='height:700px;width:400px'> "div2" frame_id='frame2'>
复制链接

扫一扫