滑輪滾動到頁面底部ajax載入資料

最後更新：2014-08-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style http color java os io 資料 for

滾動下拉到頁面底部載入資料是很多瀑布流網站的做法，那來看看配合jsonp是如何?的吧

當然本例子採用的是jquery庫，後期會做成原生js。本例的資料調用的是鋒利的jquery一書提供的一段json。

首先要先判斷頁面怎麼樣才是滾動到底部，也就是scrollTop+window的height是否大於document的height，jquery如下代碼: $(window).scrollTop()+$(window).height()>=$(document).height()；

再給window綁定scroll事件。所以整個頁面demo可以這樣做:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* { margin:0; padding:0;}

body { font-size:12px;}

p{ margin: 5px;}

.box{ padding: 10px;}

</style>

$(function(){

$(window).bind(‘scroll‘,function(){show()});

function show()

{

if($(window).scrollTop()+$(window).height()>=$(document).height())

{

ajaxRead();

}

function ajaxRead()

{

var html="";

$.ajax({

type:‘get‘,

dataType:‘jsonp‘,

url:‘http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?‘,

beforeSend:function(){console.log(‘loading...‘)},

success:function(data){

$.each(data.items,function(i,item){

html+=‘<div class="box">‘;

html+=‘<h1>‘+item.title+‘</h1>‘;

html+=‘<a hreft="‘+item.link+‘"><img src="‘+item.media.m+‘"/></a>‘

html+=‘<div>‘+item.tags+‘</div>‘;

html+=‘</div>‘;

});

$("#resText").append($(html));

complete:function(){console.log(‘mission acomplete.‘)}

});

}

})

</script>

</head>

<body>

往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉

</div>

</body>

</html>

拉到底部就是實現非同步資料載入了，當然了，實際項目還要加上如果沒資料了要怎麼顯示，怎麼操作。這些加判斷就行了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More