熱門(mén)標(biāo)簽：辦理一個(gè)400電話多少錢(qián)
察縣地圖標(biāo)注
蓄意標(biāo)記地圖標(biāo)注
信貸電銷機(jī)器人有用嗎
接聽(tīng)電話機(jī)器人哪有
電銷機(jī)器人適用范圍
廣西ai語(yǔ)音電銷機(jī)器人哪家好
莆田防封電銷卡價(jià)格
如何用地圖標(biāo)注各分公司
滾動(dòng)下拉到頁(yè)面底部加載數(shù)據(jù)是很多瀑布流網(wǎng)站的做法，那來(lái)看看配合jsonp是如何實(shí)現(xiàn)的吧，小菜總結(jié)記錄之用，高手勿噴。
當(dāng)然本例子采用的是jquery庫(kù)，后期會(huì)做成原生js。
本例的數(shù)據(jù)調(diào)用的是鋒利的jquery一書(shū)提供的一段json。
首先要先判斷頁(yè)面怎么樣才是滾動(dòng)到底部，也就是scrollTop+window的height是否大于document的height，jquery如下代碼: $(window).scrollTop()+$(window).height()>=$(document).height()；
再給window綁定scroll事件。所以整個(gè)頁(yè)面demo可以這樣做:
復(fù)制代碼 代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
title>/title>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
p{ margin: 5px;}
.box{ padding: 10px;}
/style>
!-- 引入jQuery -->
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript">/script>
script type="text/javascript">
$(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=cartagmode=anyformat=jsonjsoncallback=?',
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>
p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>
div id="resText" >
/div>
/body>
/html>
拉到底部就是實(shí)現(xiàn)異步數(shù)據(jù)加載了，當(dāng)然了，實(shí)際項(xiàng)目還要加上如果沒(méi)數(shù)據(jù)了要怎么顯示，怎么操作。這些加判斷就行了。
您可能感興趣的文章:- 基于JavaScript實(shí)現(xiàn)鼠標(biāo)向下滑動(dòng)加載div的代碼
- js實(shí)現(xiàn)滑動(dòng)到頁(yè)面底部自動(dòng)加載更多功能
- js/jquery控制頁(yè)面動(dòng)態(tài)加載數(shù)據(jù) 滑動(dòng)滾動(dòng)條自動(dòng)加載事件的方法
- 當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面底部自動(dòng)加載增加內(nèi)容的js代碼
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁(yè)面底部繼續(xù)加載
- JavaScript實(shí)現(xiàn)頁(yè)面滾動(dòng)圖片加載(仿lazyload效果)
- 使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁(yè)面新數(shù)據(jù)
- JS圖片根據(jù)鼠標(biāo)滾動(dòng)延時(shí)加載的實(shí)例代碼
- 解析javascript瀑布流原理實(shí)現(xiàn)圖片滾動(dòng)加載
- JS簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)加載數(shù)據(jù)的方法示例
標(biāo)簽：鷹潭
張掖
益陽(yáng)
阿拉善盟
儋州
延邊
銅陵
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討》，本文關(guān)鍵詞 滑輪,滾動(dòng),到,頁(yè)面,底部,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
