编辑：我认为这个问题最初过于笼统.所以我真正需要的是一个关于如何在Safari for iPhone上实现加载更多功能的非常好的教程,就像Twitter网站(mobile.twitter.com)那样.只是一个wordpress插件将无济于事.但是如果插件得到了很好的解释,就好像它是wptouch,home(也有这个功能)也可以.
我知道它在移动设备上显示并不重要,但我强调的是,如果这样的功能得到很好的解释,那么我将知道如何定制它以适应我.
我正在使用javascript函数动态加载来自数据库的条目,以便内容在同一页面中打开(如twitter(tweets Feed)和facebook(news Feed)).
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});
}
}
原文链接：https://www.f2er.com/jquery/428481.html
