php - 在 Javascript 中加载更多功能

Question

编辑:我认为这个问题最初太笼统了。因此，我真正需要的是一个很好的教程，介绍如何在 iPhone 的 Safari 上实现“加载更多”功能，就像 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 内容的阈值是当用户滚动到我们内容的底部 100 像素时(在前 2400 像素之后)。

我们需要跟踪以下 2 项:

1. 目前加载的项目/页面。
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});
    }
}