在Javascript中加載更多功能

Question

編輯：我認為這個問題最初過於籠統。 所以我真正需要的是一個關於如何在Safari for iPhone上實現加載更多功能的非常好的教程，就像Twitter網站 （mobile.twitter.com）那樣。 只是一個wordpress插件將無濟於事。 但是如果插件得到了很好的解釋，就好像它是wptouch，home（也有這個功能）也可以。

我知道它在移動設備上顯示並不重要，但我強調的是，如果這樣的功能得到很好的解釋，那么我將知道如何定制它以適應我。

我正在使用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>

Answer 1

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

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

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

我們需要跟蹤以下兩項：

1. 目前已加載的項目/頁面。
2. 我們離頁面底部有多遠。

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

var maxPage = 1;
var threshold = 100;

每當頁面滾動時我們都需要知道，因此為滾動事件添加處理程序。 找到頁面底部的滾動距離。 如果它小於定義的閾值（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});
    }
}

Answer 2

通常稱為無限卷軸。 有jQuery和Wordpress的插件：

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