页面滚动加载例子 -

qq405371160

浏览: 32430 次
性别:
来自: 深圳

最近访客更多访客>>

lw671579557

370059190

xiaolan02

u011407152

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

页面滚动加载例子

<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>

分享到：