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

来源：互联网发布：mpi编程入门编辑：程序博客网时间：2024/06/05 11:36

一、之前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_滚动条下拉自动加载内容_仿qq空间的个人中心

<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>   <script type="text/javascript">    $(document).ready(function(){        var range = 50;             //距下边界长度/单位px        var elemt = 500;           //插入元素高度/单位px        var maxnum = 3;            //设置加载最多次数        var num = 0;        $(window).scroll(function(){            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)            var dbHiht = $("body").height();          //页面(约等于窗体)高度/单位px            var main = $("#try");                         //主体元素            var mainHiht = main.height();               //主体元素高度/单位px            if((srollPos + dbHiht) >= (mainHiht-range) && num != maxnum){                main.append("<div style='height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");                num++;            }        });    });    </script></head><body>    <div id="try" style="height:960px">        <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>    </div></body></html>

三、

2.//Author:数据库之家3.//URL:http://www.uol123.com4.5.var page=0;6.$(window).scroll(function() {7.    var o = $(‘#jokelist’);8.    if(o!=null ){9.        //var hght= document.body.scrollHeight;10.        //var clt =document.documentElement.clientHeight;11.        //var top= document.documentElement.scrollTop ;12.        var hght= $(document).height();// 整个页面的高度13.        var clt =$(window).height(); // 当前可见页面高度14.        var top= $(document).scrollTop();// 滚动条距顶部高度15.        if(top>=(parseInt(hght)-clt)>>page<5){//加载前5页的16.            page=parseInt(page)+1;17.            ReadMore(page);18.        }19.    }20.}); 21. 22. 23. 24.function ReadMore(page){25.    $(“#news-bottom-list”).html(‘正在获取信息…’);26.    $(“#news-bottom-list”).append(‘<img src=”img/dailyfun/loading2.gif”>’);27.    next=parseInt(page)+1;28.    setTimeout(function(){29.        html=$.get(‘readmore.php’,‘p=’+page+‘>s=10′,function (data){30.            $(“#jokelist”).append(data);31.            if(next<=5){32.                $(“#news-bottom-list”).html(“<a href=’javascript:void(0);’ onclick=’ReadMore(“+next+“);’>查看更多资讯↓</a>”);33.            }else{34.                $(“#news-bottom-list”).html(“”);35.            }36.        });37.    },500);//等待0.5S后开始加载，你也可以去掉这个时间38.    39.}