Question

我有一个博客帖子列表，这个数字已经达到了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被隐藏）

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

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

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

非常感谢

Answer 1

jQuery Waypoints是一个很好的插件，用于对进入视图的元素做出反应;他们甚至有a lazy-loading example。

Answer 2

我不知道您的设置是怎样的，但我建议使用jquery来查找距离页面顶部的距离，这将是：

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

根据此堆栈溢出帖子：Determine distance from the top of a div to top of window with javascript

通过在每个帖子上添加编号的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/

Answer 3

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

你可以尝试的是隐藏每个博客帖子元素，除了前三个，然后是

Answer 4

我尝试获取元素的顶部并在视口中显示内容时，内容可能只是隐藏或从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>

Answer 5

您在询问延迟加载。

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

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

加载数据意味着 - 从服务器请求它。这通常涉及AJAX但不一定。（虽然你可能会使用AJAX）。 JQuery有一个很棒的ajax interface。

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

我接受了Tgr的建议并使用航路点实现了延迟加载。我甚至使用waypoint tutorial for lazy loading作为Tgr建议（请给予Tgr更多积分）。

您可以在my site

查看我的实施情况

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

我为我的源添加了一个下载链接，以便您可以下载并开始使用它。只需运行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内有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时，您需要移除触发器，其他页面可能会很有趣......

这或多或少......

我尽量让这个变得简单，但在一个答案中涵盖了一个很大的问题。所以让我知道我是否可以采取更多措施来解决问题。

懒加载博客帖子

5 个答案: