php – 在Javascript中加载更多功能

前端之家收集整理的这篇文章主要介绍了php – 在Javascript中加载更多功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

编辑:我认为这个问题最初过于笼统.所以我真正需要的是一个关于如何在Safari for iPhone上实现加载更多功能的非常好的教程,就像Twitter网站(mobile.twitter.com)那样.只是一个wordpress插件将无济于事.但是如果插件得到了很好的解释,就好像它是wptouch,home(也有这个功能)也可以.

我知道它在移动设备上显示并不重要,但我强调的是,如果这样的功能得到很好的解释,那么我将知道如何定制它以适应我.

我正在使用javascript函数动态加载来自数据库的条目,以便内容在同一页面中打开(如twitter(tweets Feed)和facebook(news Feed)).

PHP / html版本(在新标签中打开一个页面)是

echo '

javascript / ajax版本:

最佳答案
基本思想是监听滚动事件,并在服务器端实现分页.

只要文档或包含的HTML元素滚动,就会触发滚动事件.我将使用此草图作为参考,记住以下事项:

假设浏览器窗口的高度为800px,内容的初始高度为2500px.加载AJAX内容的阈值是当用户滚动到我们内容的底部100px时(在第一个2400px之后).

alt text http://i44.tinypic.com/1×443.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});
    }
}

猜你在找的jQuery相关文章