页面滚动加载例子
<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>