Tải thêm chức năng trong Javascript

Question

EDIT: Câu hỏi này ban đầu quá chung chung, tôi nghĩ vậy. Điều tôi thực sự cần là hướng dẫn rất hay về cách triển khai chức năng Tải thêm trên Safari cho iPhone giống như trang web Twitter (mobile.twitter.com). Chỉ cần một plugin wordpress sẽ không thực sự hữu ích. Nhưng nếu plugin được giải thích rõ ràng, như thể nó là wptouch, home (cũng có chức năng này) cũng có thể làm được.

Tôi biết rằng nó không thực sự quan trọng là nó đang được hiển thị trên thiết bị di động, nhưng điểm tôi nhấn mạnh là nếu một hàm như vậy được giải thích rõ, thì tôi sẽ biết cách để tùy chỉnh nó cho phù hợp với tôi.

Tôi đang sử dụng hàm javascript để tải các mục nhập từ cơ sở dữ liệu động, để nội dung mở trong cùng một trang (như với twitter (nguồn cấp dữ liệu tweet) và facebook (nguồn tin)).

Phiên bản php/html (Đó sẽ mở ra một trang trong một tab mới) là

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

Các javascript/ajax phiên bản:

<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

Ý tưởng cơ bản là để nghe di chuyển các sự kiện, và thực hiện phân trang ở phía máy chủ.

Sự kiện scroll được kích hoạt bất cứ khi nào tài liệu hoặc phần tử HTML có chứa cuộn. Tôi sẽ sử dụng bản phác thảo này để lưu ý những điều sau đây:

Giả sử chiều cao của cửa sổ trình duyệt là 800px và chiều cao ban đầu của nội dung là 2500px. Ngưỡng tải nội dung AJAX là khi người dùng cuộn xuống dưới 100px nội dung của chúng tôi (sau 2400px đầu tiên).

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

Chúng tôi sẽ cần phải theo dõi của 2 mục sau đây:

1. mục/trang nạp cho đến nay.
2. Cách chúng tôi từ dưới cùng của trang.

Tham chiếu mã nằm trong MooTools, nhưng khái niệm này giống nhau. Chuyển đổi nó sang jQuery là một nhiệm vụ tầm thường khi bạn hiểu nó.

var maxPage = 1; 
var threshold = 100; 

Chúng tôi cần biết bất cứ khi nào trang cuộn, vì vậy hãy thêm trình xử lý cho scroll events. Tìm khoảng cách di chuyển đến cuối trang. Nếu nó nhỏ hơn ngưỡng được xác định (100px), sau đó kích hoạt yêu cầu AJAX đang tải trang tiếp theo. Khi phản hồi đến (nếu thành công), hãy thêm nó vào trang và tăng số lượng tối đa.

Một điều khác cần lưu ý là chỉ kích hoạt yêu cầu AJAX nếu nội dung chưa được tải. Có một lá cờ cho biết liệu yêu cầu trang vẫn đang chờ xử lý.

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

Thường được gọi là cuộn Infinite. Có plugin cho jQuery và Wordpress:

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