隨着智能機的普及,一些手機擁有的效果也慢慢的在網頁上實現,最近的一個web項目客戶就要球實現當頁面滑動到底部的時候自動加載下一頁的數據,實現無刷新的自動加載。
因為敝人能力有限也比較懶,所以直接從網上找源碼來進行實現,不是很多,但是也有,慶幸的找到以下這個網址:
10 個支持列表無限滾動的 jQuery 插件
http://www.oschina.net/news/29428/10-aggressively-used-jquery-infinite-scroll-plugins
該文章介紹了10個能夠實現該功能的插件,最初的時候我用了介紹的第四個的插件:
然而該插件只是木然的加載另外一個頁面的數據,不能從數據庫判斷數據已經加載到了哪里,是否已經加載完畢。自己利用session來傳遞相關的數據,慶幸的是實現了判斷數據的加載,在谷歌瀏覽器下正常,不幸的是不知道為何在ie下只能加載同一條數據,不正常!白死不得其解之后只能含恨放棄了該插件,放棄了之前完成的東西。
然后我又選擇了介紹的第八個插件:
8. Infinite Ajax Scroll, a jQuery Plugin
Infinite Ajax Scroll 可將你現有的網頁變成支持無限滾動的頁面,無需太麻煩就可搞定。仔細研究后發現該插件正是我所需,而且結構很簡單,如果你現在的頁面已經實現了分頁功能的話,那么很容易的就能把它變成支持無限滾動的頁面,現有的頁面幾乎不需要做任何改動,只需要引用相關的js文件,然后配置如下的js:
1: jQuery.ias({
2: container : ".listing",
3: // Enter the selector of the element containing 寫入容器的元素<selector>
4: // your items that you want to paginate. 具體數據的元素標識
5:
6: item : ".post",
7: // Enter the selector of the element that each 要加載數據的元素標識
8: // item has. Make sure the elements are inside 用來提取下一頁信息里面的元素
9: // the container element. 從而加載到上面的容器中
10:
11: pagination : "#content .navigation",
12: // Enter the selector of the element that contains 分頁信息的容器元素標識
13: // your regular pagination links, like next, 即:首頁,上一頁,下一頁,尾頁等信息的容器。
14: // previous and the page numbers. This element
15: // will be hidden when IAS loads.
16:
17: next : ".next-posts a",
18: // Enter the selector of the link element that 下一頁的元素標識,用來獲取下一頁的信息元素
19: // links to the next page. The href attribute
20: // of this element will be used to get the items
21: // from the next page.
22:
23: loader : "images/loader.gif"
24: // Enter the url to the loader image. This image 數據進行提取加載的時候顯示的圖片
25: // will be displayed when the next page with items
26: // is loaded via AJAX.
27: });