我有一个博客文章列表，数量达到 25+，但它们都在一个页面中，所以我需要尝试构建一个延迟加载器。
我尝试了各种插件，但都没有用
http://jsfiddle.net/tara_irvine/S9GGz/6/
JavaScript：
(function($) {
$.belowthefold = function(element, settings) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top - settings.threshold;
};
$.abovethetop = function(element, settings) {
var top = $(window).scrollTop();
return top >= $(element).offset().top + $(element).height() - settings.threshold;
};
$.rightofscreen = function(element, settings) {
var fold = $(window).width() + $(window).scrollLeft();
return fold <= $(element).offset().left - settings.threshold;
};
$.leftofscreen = function(element, settings) {
var left = $(window).scrollLeft();
return left >= $(element).offset().left + $(element).width() - settings.threshold;
};
$.inviewport = function(element, settings) {
return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};
$.extend($.expr[':'], {
"below-the-fold": function(a, i, m) {
return $.belowthefold(a, {threshold : 0});
},
"above-the-top": function(a, i, m) {
return $.abovethetop(a, {threshold : 0});
},
"left-of-screen": function(a, i, m) {
return $.leftofscreen(a, {threshold : 0});
},
"right-of-screen": function(a, i, m) {
return $.rightofscreen(a, {threshold : 0});
},
"in-viewport": function(a, i, m) {
return $.inviewport(a, {threshold : 0});
}
});
})(jQuery);
$(function() {
var previous = "";
$(window).bind("scroll", function(event) {
$(".blog-post:in-viewport").each(function() {
$(this).addClass("visible");
});
});
});
http://jsfiddle.net/tara_irvine/S9GGz/9/
http://jsfiddle.net/tara_irvine/S9GGz/13/
有没有办法检查 div 的最高值，如果它在视图中，则添加一个类，使 div 变得可见（页面加载 div 是隐藏的）？
我看过这些帖子，但在尝试了各种解决方案后，没有一个对我有用。
我哪里错了？
jQuery Waypoints 是一个很好的插件，用于对进入视野的元素做出反应；他们甚至有一个延迟加载的例子.
我不知道您的设置如何，但我建议使用 jQuery 找出与页面顶部的距离，这将是：
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance = (elementOffset - scrollTop);
根据这篇 Stack Overflow 帖子：Determine distance from the top of a 'div' to top of the window with JavaScript
通过在每个帖子上放置编号的 ID 或名称，将其应用于您的第 25 篇帖子（我认为该页面是 PHP 生成的）。
然后使用Ajax 当距离达到一定量时加载更多的博客文章。
您可以使用 jQuery 大于号来隐藏它们：
$(".element-class:gt(24)").css("display", "none");
文档在这里：http://api.jquery.com/gt-selector/
然后只要你滚动到某个滚动顶部，你就可以设置
$("visible-element").css("display", "block")
我尝试获取元素的顶部并在视口中显示内容，内容可能只是隐藏或从 ajax 调用加载。试试这段代码。您可以尝试使用敏感度变量来查看最适合您的方法：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
var processScroll = true;
var sensitivity = 10;
function handleScroll()
{
if (processScroll) {
processScroll = false;
topHidden = $('.block_hidden:first').offset().top;
if(($(window).scrollTop() + $(window).height() ) > (topHidden + sensitivity))
{
console.log('show now');
$('.block_hidden:first').removeClass('block_hidden').addClass('block');
}
}
processScroll = true;
}
$(document).ready(function()
{
$(window).scroll(handleScroll);
});
</script>
<style>
.block_hidden{
width:300px;
background: green;
margin:5px;
visibility: hidden;
height: 10px !important;
}
.block{
height: 200px;
width:300px;
background: green;
margin:5px;
}
</style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block_hidden"></div>
<div class="block_hidden"></div>
<div class="block_hidden"></div>
<div class="block_hidden"></div>
<div class="block_hidden"></div>
<div class="block_hidden"></div>
</body>
</html>
http://archive.plugins.jquery.com/project/lazyload 是一个懒加载插件列表，但更多的是图片加载。
您可以尝试隐藏除前三个之外的每个博客元素，然后再隐藏。
你问的是延迟加载。
好吧，答案必须包括服务器端组件。您的问题没有指定您使用的是哪种类型的服务器端语言。在我的回答中，我将使用一些基本的 PHP 代码来模拟随机博客文章。
延迟加载意味着我们只加载用户可以看到的内容，然后在需要时加载更多数据。
加载数据意味着从服务器请求它。这通常涉及Ajax，但不一定（尽管您可能会使用 Ajax）。 jQuery 有一个很棒的Ajax 接口。
最大的问题是：什么应该触发我的下一个负载？因此所有的插件。
我采纳了 Tgr 的建议并实现了带有路标的延迟加载。我什至按照 Tgr 的建议使用 waypoint 教程进行延迟加载。
你可以在我的网站看到我的实现。
我做的是模拟博客文章，标题不断变化。每次用户向下滚动足够多时，我就会从服务器获得更多帖子。
我为我的源添加了一个下载链接，所以你可以下载并开始使用它。只需运行
main.html文件
more_posts.phplorem ipsum看起来像这样：
<h1> This is post number <?php echo uniqid("",true)?> </h1>
<div style="color:red">
Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>
<div style="color:blue">
Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>
如您所见，我仅有的 PHP 代码是在标题中添加一些随机内容。
这对您来说应该很熟悉，因为您的博客中已经有超过 25 篇文章了。
真正的逻辑在于
main.html<section id="container">
</section>
<footer>
<nav>
<ul>
<!-- Hijack this link for the infinite scroll -->
<li class="more"><a href="more_posts.php" title="Traditional navigation link">Next Page</a></li>
</ul>
</nav>
</footer>
这个想法是你有
sectionmorefooterWaypoint 使用此链接触发下一次加载。每当链接即将显示在屏幕上时，我们将使用 Ajax 自动获取下一篇文章。
所以 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' .. })当我的演示加载时，内容完全是空的，所以我继续获取我想要展示的第一篇文章。然后我告诉 waypoint 在页脚上收听 - 只要页脚靠近，我就会去获取更多帖子。
有一个棘手的部分，我做
$footer.waypoint('remove')callbackloadMorePosts