在Javascript中加載更多功能

編輯：這個問題最初太籠統了，我想。所以我真正需要的是一個非常好的教程，關於如何在Safari上實現加載更多功能iPhone就像Twitter網站（mobile.twitter.com）一樣。只是一個WordPress插件不會真的有幫助。但是，如果插件被很好地解釋了，就好像它是wptouch一樣，home（也有這個功能）也可以。在Javascript中加載更多功能

我知道它在移動設備上顯示並不重要，但是我強調的一點是，如果這樣的功能被很好地解釋了，那麼它將由我來決定如何定製它以適合我。

我正在使用JavaScript函數來加載動態來自數據庫的條目，以便內容在同一頁面中打開（例如twitter（tweets feed）和facebook（news feed））。

的PHP/HTML版本（在新標籤中打開一個頁面）是

echo '<a href="http://'. $_SERVER['HTTP_HOST'] .'/'.$domain_page.'?form='.$form_id.'&page='.($page+1).'">Load more entries&rsaquo; </a>';

的JavaScript/AJAX版本：

<div id="call_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>" class="ajax-load-more"> 

       <img id="spinner<?php echo md5($_SERVER['REQUEST_URI']); ?>" class="spin" src="<?php bloginfo('template_directory'); ?>/images/main-ajax-loader.gif" style="display:none" alt="" /> 

       <a class="ajax" href="javascript:$ajax_hv('#spinner<?php echo md5($_SERVER['REQUEST_URI']); ?>').fadeIn(200); 

       $ajax_hv('#ajaxentries_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>').load('form='<? echo $form_id; ?>&page=<?php echo $page+1;?>', {}, 

       function(){ $ajax_hv('#call_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>').fadeOut();})">Load more entries... 

       </a>

來源

2010-02-23 erastusnjuki

的基本思想是聽滾動事件，並實現在服務器端分頁。

A scroll只要文檔或包含的HTML元素滾動，就會觸發事件。我將使用此草圖作爲參考，並記住以下事項：

假設瀏覽器窗口的高度爲800px，並且內容的初始高度爲2500px。加載AJAX內容的閾值是當用戶滾動到我們內容的底部100像素（在第一個2400像素之後）時。

alt text http://i44.tinypic.com/1x443.jpg

我們需要牢記以下2項的軌跡：

條/頁加載爲止。
我們從的底部離頁面有多遠。

代碼引用在MooTools中，但概念是相同的。一旦你理解它，將它轉換爲jQuery是一項微不足道的任務。

var maxPage = 1; 
var threshold = 100;

我們需要知道每當頁面滾動，所以添加一個處理scroll events。找到頁面底部的滾動距離。如果它小於定義的閾值（100px），則發出加載下一頁的AJAX請求。當響應來臨（如果成功），將其附加到頁面並增加maxPage編號。

要記住的另一件事是隻有在內容尚未加載的情況下才會觸發AJAX請求。有一個標誌，指示頁面請求是否仍在等待。

var isLoading = false;

window.addEvent('scroll', function() { 
    // the height of the entire content (including overflow) 
    var contentHeight = window.getScrollSize().y; 
    // current scroll is height of content that's above the viewport plus 
    // height of the viewport. 
    var contentScrolled = window.getScroll().y + window.getSize().y; 
    var distanceToBottom = contentHeight - contentScrolled; 
    var closeToBottomOfPage = distanceToBottom < threshold; 
    var shouldLoadMoreContent = !isLoading && closeToBottomOfPage; 

    if(shouldLoadMoreContent) { 
     // create an ajax request 
     var request = new Request({ 
      url: 'http://www.example.com/more', 
      onSuccess: function(responseText) { 
       $('page').append(responseText); 
       maxPage++; 
      }, 
      onRequest: function() { 
       isLoading = true; 
      }, 
      onComplete: function() { 
       isLoading = false; 
      } 
     }); 
     // fire off ajax request with the page # as a querystring param 
     request.send({page: maxPage}); 
    } 
}

來源

2010-03-12 12:01:50 Anurag

非常感謝我消化和測試:) – erastusnjuki 2010-03-17 06:46:15

這真的有幫助！謝謝。 – erastusnjuki 2010-03-19 02:38:29

很高興幫助。乾杯! – Anurag 2010-03-19 02:48:36

俗稱的無限滾動。有對jQuery和WordPress插件：

http://www.infinite-scroll.com/

來源

2010-02-23 03:06:54

任何其他鏈接，解釋功能的運作，而不是隻給一個jQuery插件？ – erastusnjuki 2010-02-24 02:40:22

在Javascript中加載更多功能

回答

相關問題