网页自动 追加

自动追加就是滚动条接到窗口最底部时,进行异步加载数据追加到后面。

 

var content=document.getElementById('content');
	var loadButton=document.getElementById('loadButton');
	
	var index=1;
	function scrollFun(){
		window.onscroll=function(){
			var heightAdd=document.body.clientHeight+document.body.scrollTop;
			var buttonAdd=getTop(loadButton);
			
			if(heightAdd>=buttonAdd){
				window.onscroll=function(){};
				setTimeout(function(){
					$(content).append('<div><br /><br /><br /><br />添回一页数据 第<b style="color:red;">['+index+']</b>次加载内容<br /><br /><br /><br /></div>');
					index++;
					scrollFun();
				},1500);
			}
			document.getElementById('text_id').innerHTML=heightAdd+'   -  '+buttonAdd;
		}
	}

	scrollFun();
    function getTop(e) {  
        var offset = e.offsetTop;  
        if (e.offsetParent != null) offset += getTop(e.offsetParent);  
        return offset;  
    }  
 


网页自动 追加
 
网页自动 追加
 
网页自动 追加
 
网页自动 追加

 

 

image_auto_size-2011-02-22.rar 图片自动大小

你可能感兴趣的:(网页自动追加)