6

我有一个博客文章列表，数量已达到 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 被隐藏）

我看过这些帖子，但在尝试了各种解决方案后，没有一个对我有用。

如何使用 jquery Position of Div 相对于视口顶部检查元素是否在用户的视图中

如果有人能对此有所了解，我将不胜感激。我不知道我哪里错了。

非常感谢

4

5 回答 5

7

jQuery Waypoints是一个很好的插件，可以对出现的元素做出反应；他们甚至有一个延迟加载的例子。

于 2012-08-15T09:58:28.210 回答
2

我不知道您的设置如何，但我建议使用 jquery 找出与页面顶部的距离，这将是：

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

根据此堆栈溢出帖子：使用 javascript 确定从 div 顶部到窗口顶部的距离

通过在每个帖子上加上编号的 ID 或名称（我认为该页面是 PHP 生成的），将其应用于您的第 25 个帖子。

然后当距离达到一定数量时使用ajax加载更多的博客文章。

编辑：您可以使用 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/

于 2012-08-19T12:34:31.467 回答
1

我尝试在视口中获取元素的顶部并显示内容，内容可能只是隐藏或从 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>
于 2012-08-21T17:16:58.267 回答
1

您在询问延迟加载。

那么答案必须包括服务器端。您的问题未指定您使用的服务器端语言类型。在我的回答中，我将使用一些基本的 PHP 代码来模拟随机博客文章。

延迟加载意味着我们只加载用户可以看到的内容，然后在需要时加载更多数据。

加载数据意味着 - 从服务器请求它。这通常涉及AJAX，但不一定。（尽管您可能可以使用 AJAX ）。JQuery 有一个美妙的ajax 接口。

最大的问题是 - 什么应该触发我的下一次加载 - 因此所有插件。

我接受了 Tgr 的建议，并使用航路点实现了延迟加载。我什至按照 Tgr 的建议使用航点教程进行延迟加载（请给 Tgr 更多积分）。

你可以在我的网站上看到我的实现

我所做的是更改标题的模拟博客文章。每次用户向下滚动足够多时，我都会从服务器获得更多帖子。

我为我的源添加了一个下载链接，因此您可以下载并开始使用它。只要跑main.html，你就可以走了。

该文件more_posts.php生成lorem 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- 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>

这个想法是你有section它包含前几篇文章 - 并让你在页面上滚动。在底部，您more在 a 中有一个链接footer，当 JavaScript 被禁用时，它应该充当常规的“下一个”链接。

Waypoint 使用此链接触发下一次加载。每当链接即将显示在屏幕上时，我们将使用 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' .. })。它使用与链接的 href 属性相同的 URL。在我的示例中，href 属性指向“more_posts.php”。

当我的演示加载时，内容完全是空的，所以我继续获取我想展示的第一个帖子。然后我告诉航点在页脚上收听 - 每当页脚靠近时，我就会去获取更多帖子。

我做的一个棘手的部分是$footer.waypoint('remove')传递一个callback将loadMorePosts航路点再次绑定到页脚的地方。这只是一个技术性问题 - 航点需要您在获取更多 HTML 时删除触发器，否则您的页面可能会表现得很有趣..

这或多或少是..

我试图让这个尽可能简单，但这是一个需要在一个答案中涵盖的大问题。所以让我知道我是否可以做更多的事情来解决问题。

于 2012-08-21T20:29:30.870 回答
1

http://archive.plugins.jquery.com/project/lazyload是延迟加载插件的列表，但更多的是用于图像加载。

您可以尝试隐藏除前三个之外的每个 blogpost 元素，然后打开

于 2012-08-13T09:51:43.947 回答