`
DBear
  • 浏览: 228201 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

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

 

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

分享到:
评论

相关推荐

    页面滚动到底部自动加载数据

    页面滚动到底部自动加载数据功能模拟,HTML5+Jquery,需要的下载看一下

    拖动滚动条自动加载图片页面

    当拖动滚动条时会自动加载图片页面,由于数据量庞大,如果一次性完全加载的话,会消耗大量的带宽,通过边拖动滚动条边加载可以加载更多数据。

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,...

    JS JQUERY实现滚动条自动滚到底的方法

    设置页面加载时滚动条自动滚到底的方法: jQuery: 代码如下: $(function(){  var h = $(document).height()-$(window).height();  $(document).scrollTop(h); }); JavaScript: 代码如下: [removed] = ...

    基于javascript实现浏览器滚动条快到底部时自动加载数据

    主要介绍了基于javascript实现浏览器滚动条快到底部时自动加载数据的相关资料,需要的朋友可以参考下

    JS滚动列表加载

    参数说明 listLoadingMore({id:"",id2:function(){},...loading():根据当前滚动条的位置,自动判断是否需要加载新数据; show(boolean,boolean):强制设置加载中和加载完成dom的显示或隐藏,true表示显示,false相对。

    当滚动条滚动到页面底部自动加载增加内容的js代码

    主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下

    JS实现部分HTML固定页面顶部随屏滚动效果

    如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡。 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动...

    JS实现页面数据无限加载

    在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果: ...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...

    python中selenium操作下拉滚动条的几种方法汇总

    UI自动化中经常会遇到元素识别不到,找不到的问题,原因有很多,比如不在iframe里,xpath或id写错了等等;但有一种是在当前显示的页面元素不可见,拖动下拉条后元素就出来了。 比如下面这样一个网页,需要进行拖动下...

    点击加载更多图片与内容

    当初进行项目的时候没有找到合适的代码(找到的很多都是滚动条拖到底自动出现,没有点击出现的),并且要实现一个页面多个点击加载,所以动手写了一个,实现方法简单,调试方便,基于真实项目的实现设计,直接就可以...

    ScrollBar:使用本机JS模拟滚动条

    ScrollBar.js - 模拟滚动条特性支持竖向(v)、横向(h)、自动双向(auto)三种方向设置支持自动检查容器大小变化而重新调整(多用于图片加载,ajax填充内容等)支持响应鼠标滚轮,触屏设备的touch行为资源引用&lt;...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...

    程序天下:JavaScript实例自学手册

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

Global site tag (gtag.js) - Google Analytics