我有一个博客文章列表,数量达到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被隐藏)?
我看过这些帖子,但在尝试了各种解决方案后,没有一个对我有效。
- How to check if an element is in the view of the user with jquery
- Position of Div in relation to the Top of the Viewport
我哪里做错了?
5条答案
按热度按时间r3i60tvu1#
jQuery Waypoints是一个很好的插件,用于对进入视图的元素做出React;他们甚至有a lazy-loading example。
k3fezbri2#
我不知道你的设置是如何的,但我建议使用jQuery来找出从页面顶部的距离,这将是:
根据这篇Stack Overflow文章:Determine distance from the top of a 'div' to top of the window with JavaScript
把它应用到你的第25篇文章中,在每个帖子上加上编号的id或名字(我想页面是PHP生成的)。
然后使用Ajax加载更多的博客文章时,距离达到一定的数额。
你可以使用jQuery greater-than来隐藏它们:
文档在这里:http://api.jquery.com/gt-selector/
然后只要你滚动过某个滚动条顶端,你就可以设置
试试这个小提琴:http://jsfiddle.net/addiktedDesign/KjNnY/
sf6xfgos3#
我试过获取一个元素的顶部,当它在viewport中时显示内容,内容可以隐藏或从 AJAX 调用加载。试试这个代码。您可以尝试使用敏感度变量,看看什么最适合您:
deikduxw4#
http://archive.plugins.jquery.com/project/lazyload是一个延迟加载插件列表,但它更多的是用于图像加载。
您可以尝试隐藏除前三个元素之外的每个blogpost元素,然后打开。
xeufq47z5#
您正在询问有关“lazy loading”的问题。
答案必须包括服务器端组件。您的问题没有指定您使用的服务器端语言类型。在我的回答中,我将使用一些基本的PHP代码来模拟随机的博客文章。
延迟加载意味着我们只加载用户可以看到的内容,稍后在需要时加载更多数据。
加载数据意味着从服务器请求数据。这通常涉及Ajax,但不一定(尽管您可能可以使用 AJAX )。jQuery有一个很棒的Ajax interface。
最大的问题是:什么会触发我的下一次加载?因此,所有的插件。
我采纳了Tgr的建议,并实现了一个带有路点的延迟加载。我甚至按照Tgr的建议使用了waypoint tutorial for lazy loading。
你可以在my site上看到我的实现。
我所做的是用改变标题来模拟博客文章。每当用户向下滚动足够多的时候,我就会从服务器上收到更多的帖子。
我为我的源代码添加了一个下载链接,所以你可以下载并开始玩它。只要运行
main.html
就可以了。文件
more_posts.php
生成了一个带有随机标题的lorem ipsum
帖子(我需要一些虚假内容才能在页面上滚动)。它看起来像这样:
正如您所看到的,我所拥有的唯一PHP代码是在标题中添加一些随机的东西。
这应该看起来很熟悉,因为你已经在你的博客25+职位。
真实的的逻辑在
main.html
中,HTML部分如下所示:这个想法是你有
section
,它包含了前几篇文章,它让你在页面上滚动。在底部,您在footer
中有一个more
链接;即当JavaScript被禁用时,它应该充当常规“下一个”链接。Waypoint使用此链接触发下一次加载。每当链接即将显示在屏幕上时,我们将使用 AJAX 自动获取下一篇文章。
JavaScript部分看起来是这样的:
函数
loadMorePosts
调用方法$.get
,这是$.ajax({type:'GET' .. })
的更简单语法。它使用与链接的 href 属性相同的URL。在我的示例中,href 属性指向“more_posts.php”。当我的演示加载时,内容完全是空的,所以我继续获取我想要显示的第一个帖子。然后我告诉waypoint去监听页脚--每当页脚靠近的时候,我就去获取更多的帖子。
有一个棘手的部分,我做了
$footer.waypoint('remove')
,并传递了一个callback
到loadMorePosts
,它再次将waypoint绑定到footer。这只是一个技术问题-路点需要你删除触发器,而你获取更多的HTML,其他您的页面可能会采取滑稽...