您的位置：首页 > Web前端 > JQuery

滑到底部自动加载-Infinite Ajax Scroll,a jQuery plugin

2013-01-20 15:56 447 查看

随着智能机的普及，一些手机拥有的效果也慢慢的在网页上实现，最近的一个web项目客户就要球实现当页面滑动到底部的时候自动加载下一页的数据，实现无刷新的自动加载。

因为敝人能力有限也比较懒，所以直接从网上找源码来进行实现，不是很多，但是也有，庆幸的找到以下这个网址：

10个支持列表无限滚动的jQuery插件

http://www.oschina.net/news/29428/10-aggressively-used-jquery-infinite-scroll-plugins

     该文章介绍了10个能够实现该功能的插件，最初的时候我用了介绍的第四个的插件：

      4.ScrollExtendPlugin

     然而该插件只是木然的加载另外一个页面的数据，不能从数据库判断数据已经加载到了哪里，是否已经加载完毕。自己利用session来传递相关的数据，庆幸的是实现了判断数据的加载，在谷歌浏览器下正常，不幸的是不知道为何在ie下只能加载同一条数据，不正常！白死不得其解之后只能含恨放弃了该插件，放弃了之前完成的东西。

     然后我又选择了介绍的第八个插件：

     8.InfiniteAjaxScroll,ajQueryPlugin

      InfiniteAjaxScroll可将你现有的网页变成支持无限滚动的页面，无需太麻烦就可搞定。仔细研究后发现该插件正是我所需，而且结构很简单，如果你现在的页面已经实现了分页功能的话，那么很容易的就能把它变成支持无限滚动的页面，现有的页面几乎不需要做任何改动，只需要引用相关的js文件，然后配置如下的js：

jQuery.ias({

[code]container:".listing",

//Entertheselectoroftheelementcontaining写入容器的元素<selector>

//youritemsthatyouwanttopaginate.具体数据的元素标识

item:".post",

//Entertheselectoroftheelementthateach要加载数据的元素标识

//itemhas.Makesuretheelementsareinside用来提取下一页信息里面的元素

//thecontainerelement.从而加载到上面的容器中

pagination:"#content.navigation",

//Entertheselectoroftheelementthatcontains分页信息的容器元素标识

//yourregularpaginationlinks,likenext,即：首页，上一页，下一页，尾页等信息的容器。

//previousandthepagenumbers.Thiselement

//willbehiddenwhenIASloads.

next:".next-postsa",

//Entertheselectorofthelinkelementthat下一页的元素标识，用来获取下一页的信息元素

//linkstothenextpage.Thehrefattribute

//ofthiselementwillbeusedtogettheitems

//fromthenextpage.

loader:"images/loader.gif"

//Entertheurltotheloaderimage.Thisimage数据进行提取加载的时候显示的图片

//willbedisplayedwhenthenextpagewithitems

//isloadedviaAJAX.

});

[/code]

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航