页面滚动加载例子

最新推荐文章于 2024-07-12 09:36:48 发布

iteye_10628

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量86

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_10628/article/details/82440461

版权

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