- <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>
页面滚动加载例子
最新推荐文章于 2021-06-03 14:59:12 发布