页面滚动加载例子

最新推荐文章于 2025-11-28 04:56:28 发布

原创最新推荐文章于 2025-11-28 04:56:28 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的懒加载iframe技术，该技术能够提高网页加载速度并优化用户体验。通过对多个iframe元素进行监听，当它们即将进入视口时动态加载内容，从而减轻了浏览器的初始加载负担。

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