js兑现滚动条到底自动加载图片

js实现滚动条到底自动加载图片

之前Google的图片搜索结果界面提供了一个功能，即滚动条滚动到接近底部的位置自动加载剩余图片。个人觉得这个功能还蛮人性化的，避免来回翻页的繁琐，让搜索结果以增量形式展现。所以也自己仿造了一个。功能是基于JQuery的。下面是代码。

$(window).scroll(function() {
	var o = $('#pincontainer');
        
        // 并不是所有页面都要执行加载操作。
        // 你也可以选择别的识别条件。
	if(o!=null && o.length !=0){
          
          //获取网页的完整高度(fix)
	  var hght= window.scrollHeight;

	  //获取浏览器高度(fix)
	  var clientHeight =window.clientHeight;

          //获取网页滚过的高度(dynamic)
	  var top= window.pageYOffset || 
                        (document.compatMode == 'CSS1Compat' ?  
                        document.documentElement.scrollTop : 
                        document.body.scrollTop);
	  

          //当 top+clientHeight = scrollHeight的时候就说明到底儿了
	  if(top>=(parseInt(hght)-clientHeight)){
		 show();
	  }
	}
  });
  
  //我所要执行的操作是把ajax取得的数据塞到目标div中
  function show(){
  	var target = $('#pincontainer'); 

	if(!target){return false;}

        //一般你都要记录一下你的数据的录入状态，比如到当前显示页码
	var current_page = parseInt(target.attr('index'));

        //还要记录一个最大显示页码，以阻止请求溢出
	var max_page = parseInt(target.attr('maxPages'));
	if(current_page >= max_page){
	  return false;
	}
	
	var data={};
	data.nextPage = parseInt(current_page)+1;
	
	
	var currentHref = window.location;       
	
        // 有的时候可能还要从url中读取参数，我使用正则式
	var tcaStr = new RegExp("(^|)tca=([^\&]*)(\&|$)","gi").exec(currentHref);
	if(tcaStr) data.tca = tcaStr[2];
    
	var scaStr = new RegExp("(^|)sca=([^\&]*)(\&|$)","gi").exec(currentHref);
	if(scaStr) data.sca = scaStr[2];
	
	var tagStr = new RegExp("(^|)tag=([^\&]*)(\&|$)","gi").exec(currentHref);
	if(tagStr) data.tag = tagStr[2];
	
        // ajax请求数据
	jQuery.ajax({
	    type:"POST",
        url: "/show/getPins/",
        data:data,
        dataType: "json",
        beforeSend: function(XMLHttpRequest){
		  $("#loading").css('display','');
	    },
        success:function(response) {
	      if(response.data){
	    	for(var i=0, length = response.data.length; i<length; i++){
	    		var html = response.data[i];
	    		var test = $(html);
	    		target.append(test);
	    		var img = test.find('img');
	    		X.util.flowPin(img[0],188);
	    	}
	    	
                target.attr('index',parseInt(current_page)+1);
             
                $("#loading").css('display','none');
	      }
  	},
  	error:function(){
  	      alert("加载失败");
  	}
    });
	
	return false;
  }

这个功能的一个关键成败点是scrollTop的计算。刚开始我只使用了document.body.scrollTop，但是这个数值在chrome中一直显示0，于是有了上面的多浏览器兼容计算方法。

        //获取网页滚过的高度(dynamic)
	  var top= window.pageYOffset || 
                        (document.compatMode == 'CSS1Compat' ?  
                        document.documentElement.scrollTop : 
                        document.body.scrollTop);

改进：考虑到有些用户并不喜欢自动加载的功能，可以在页面上添加“取消自动加载”的按钮，换以按钮控制。

js兑现滚动条到底自动加载图片

相关推荐