懒加载博客post
我有一个博客文章列表，这个数字已达到25+，但它只在一页中，所以我需要尝试构建一个懒惰的加载器。
我尝试了各种插件但没有一个正常工作
http://jsfiddle.net/tara_irvine/S9GGz/6/
http://jsfiddle.net/tara_irvine/S9GGz/9/
http://jsfiddle.net/tara_irvine/S9GGz/13/
有没有办法检查div的顶部值，如果它在视图中，则添加一个类，以便div变为可见（页面加载div被隐藏）
我看过这些post，但在尝试了各种解决方案后，没有一个对我有用。
如何使用jquery 相对于视口顶部的位置Div 来检查元素是否在用户视图中
如果有人能对此有所了解，我将非常感激。 我不知道我哪里出错了。
非常感谢
jQuery Waypoints是一个很好的插件，用于对进入视图的元素做出反应; 他们甚至有一个懒惰的例子 。
我不知道你的设置是怎样的，但我建议使用jquery来查找距离页面顶部的距离，这将是：
var scrollTop = $(window).scrollTop(), elementOffset = $('#my-element').offset().top, distance = (elementOffset - scrollTop);
根据此堆栈溢出post： 使用javascript确定从div顶部到窗口顶部的距离
通过在每个post上放置编号的id或名称（我认为该页面是PHP生成的）将其应用于您的第25个post。
然后在距离达到一定数量时使用ajax加载更多博客post。
编辑：您可以使用jquery大于隐藏它们：
$(".element-class:gt(24)").css("display","none");
文档： http ： //api.jquery.com/gt-selector/
然后，如果您滚过某个滚动顶部，您可以设置
$("visible-element").css("display","block")
编辑2：尝试这个骗局 – http://jsfiddle.net/addiktedDesign/KjNnY/
http://archive.plugins.jquery.com/project/lazyload是一个延迟加载pliugins的列表，但它更适用于图像加载。
您可以尝试的是每个blogpost元素都隐藏，除了前三个，然后是
我尝试获取元素的顶部并在视口中显示内容时，内容可能只是隐藏或从ajax调用加载。 试试这个代码。 您可以尝试使用灵敏度变量来查看最适合您的方法：
你问的是懒惰加载。
那么答案必须包括服务器端。 您的问题未指定您使用的服务器端语言类型。 在我的回答中，我将使用一些基本的PHP代码来模拟随机博客post。
延迟加载意味着我们只加载用户可以看到的内容，然后在需要时加载更多数据。
加载数据意味着 – 从服务器请求它。 这通常涉及AJAX但不一定。 （虽然你可能会使用AJAX）。 JQuery有一个很棒的ajax接口 。
最大的问题是 – 什么应该触发我的下一次加载 – 因此所有的插件。
我接受了Tgr的建议并使用航路点实现了延迟加载。 我甚至使用了Waypoint教程来进行延迟加载，如Tgr建议的那样（请给Tgr更多积分）。
您可以在我的网站上看到我的实施
我所做的是模拟改变标题的博客文章。 每次用户向下滚动时，我都会从服务器获得更多post。
我为我的源添加了一个下载链接，以便您可以下载并开始使用它。 只需运行main.html就可以了。
文件https://stackoverflow.com/questions/11931264/lazy-load-blog-posts/more_posts.php生成一个随机标题的lorem ipsumpost。 （我需要一些假的内容才能在页面上滚动）。
看起来像这样
This is post number
Lorem ipsum dolor .... Quisque ut pretium nibh. Lorem ipsum dolor .... Quisque ut pretium nibh.
正如您所看到的，我唯一的PHP代码就是在标题中添加一些随机的东西。
这应该看起来很熟悉，因为您的博客中已经有25个以上的post。
真正的逻辑在于main.html – HTML部分就是这样
想法是你有包含前几个post的部分 – 并在页面上给你一些滚动。 在底部，您在footer有一个more链接，当禁用JavaScript时，它应该充当常规的“下一个”链接。
Waypoint使用此链接触发下一次加载。 每当链接即将在屏幕上显示时，我们将使用ajax自动获取下一个post。
所以JavaScript部分看起来像这样：
$(document).ready(function() { function loadMorePosts( callback ){ $.get($('.more a').attr('href'), function(data) { $('#container').append($(data)); if ( typeof(callback) == "function" ){ callback(); } }) } loadMorePosts(); var $footer = $('footer'); var opts = { offset: '100%' }; $footer.waypoint(function(event, direction) { $footer.waypoint('remove'); loadMorePosts( function(){ $footer.waypoint(opts);} ); }, opts); });
函数loadMorePosts调用方法$.get ，这是$.ajax({type:'GET' .. })的更简单语法。 它使用与链接的href属性相同的URL。 在我的示例中，href属性指向“https://stackoverflow.com/questions/11931264/lazy-load-blog-posts/more_posts.php”。
当我的演示加载时，内容完全是空的，所以我继续前进并获取我想要显示的第一篇文章。 然后我告诉路点听取页脚 – 当页脚靠近时，我会去获得更多post。
有一个棘手的部分，我做$footer.waypoint('remove')并将callback给loadMorePosts ，它再次将loadMorePosts点绑定到页脚。 这只是一个技术性 – 航点需要您在获取更多HTML时删除触发器，其他页面可能会很有趣。
这或多或少……
我尽量使这个变得简单，但在一个答案中涵盖了一个巨大的问题。 所以，让我知道我是否可以采取更多措施来解决问题。