這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)過程是怎樣的,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
滾動下拉到頁面底部加載數(shù)據(jù)是很多瀑布流網(wǎng)站的做法,那來看看配合jsonp是如何實現(xiàn)的吧,小菜總結(jié)記錄之用,高手勿噴。
當(dāng)然本例子采用的是jquery庫,后期會做成原生js。
本例的數(shù)據(jù)調(diào)用的是鋒利的jquery一書提供的一段json。
首先要先判斷頁面怎么樣才是滾動到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代碼: $(window).scrollTop()+$(window).height()>=$(document).height();
再給window綁定scroll事件。所以整個頁面demo可以這樣做:
代碼如下:
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
往下拉
拉到底部就是實現(xiàn)異步數(shù)據(jù)加載了,當(dāng)然了,實際項目還要加上如果沒數(shù)據(jù)了要怎么顯示,怎么操作。這些加判斷就行了。
上述就是小編為大家分享的滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)過程是怎樣的了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。