Question

编辑：我认为这个问题最初过于笼统。所以我真正需要的是一个关于如何在Safari上为 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之后）。

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

我们需要跟踪以下两项：

目前已加载的项目/页面。
我们距离底部有多远页面。

代码引用在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});
    }
}

Answer 2

通常称为无限卷轴。有jQuery和Wordpress的插件：

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

在Javascript中加载更多功能

2 个答案: