jQuery实现新浪微博自动底部加载的方法
jQuery ScrollPagination plugin 是一個jQuery 實現的支持無限滾動加載數據的插件。
地址:http://andersonferminiano.com/jqueryscrollpagination/
他的demo下載:http://andersonferminiano.com/jqueryscrollpagination/jqueryscrollpagination.zip
實例代碼:
? $(function(){
??????????????? $('#content').scrollPagination({
??????????????????? 'contentPage': 'democontent.html', // the url you are fetching the results
??????????????????? 'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
??????????????????? 'scrollTarget': $(window), // who gonna scroll? in this example, the full window
??????????????????? 'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
??????????????????? 'beforeLoad': function(){ // before load function, you can display a preloader div
??????????????????????? $('#loading').fadeIn();
??????????????????? },
??????????????????? 'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
???????????????????????? $('#loading').fadeOut();
???????????????????????? var i = 0;
???????????????????????? $(elementsLoaded).fadeInWithDelay();
???????????????????????? if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
??????????????????????????? $('#nomoreresults').fadeIn();
??????????????????????????? $('#content').stopScrollPagination();
???????????????????????? }
??????????????????? }
??????????????? });
??????????????? // code for fade in element by element
??????????????? $.fn.fadeInWithDelay = function(){
??????????????????? var delay = 0;
??????????????????? return this.each(function(){
??????????????????????? $(this).delay(delay).animate({opacity:1}, 200);
??????????????????????? delay += 100;
??????????????????? });
??????????????? };
???????????????????????
??????????? });
轉載于:https://www.cnblogs.com/leejersey/p/3666024.html
總結
以上是生活随笔為你收集整理的jQuery实现新浪微博自动底部加载的方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 测绘工程就业前景如何(测绘工程就业前景)
- 下一篇: Implementation:Bellm