jquery 我如何延迟加载博客文章来保持页面大小？

cgvd09ve 于 2023-05-06 发布在 jQuery

关注(0)|答案(5)|浏览(142)

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

来源：https://stackoverflow.com/questions/11931264/how-can-i-lazy-load-blog-posts-to-keep-the-page-size-down

5条答案

按热度按时间

r3i60tvu1#

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

赞(0）回复(0）举报 2023-05-06

k3fezbri2#

我不知道你的设置是如何的，但我建议使用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
把它应用到你的第25篇文章中，在每个帖子上加上编号的id或名字（我想页面是PHP生成的）。
然后使用Ajax加载更多的博客文章时，距离达到一定的数额。
你可以使用jQuery greater-than来隐藏它们：

$(".element-class:gt(24)").css("display", "none");

文档在这里：http://api.jquery.com/gt-selector/
然后只要你滚动过某个滚动条顶端，你就可以设置

$("visible-element").css("display", "block")

试试这个小提琴：http://jsfiddle.net/addiktedDesign/KjNnY/

赞(0）回复(0）举报 2023-05-06

sf6xfgos3#

我试过获取一个元素的顶部，当它在viewport中时显示内容，内容可以隐藏或从 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>

赞(0）回复(0）举报 2023-05-06

deikduxw4#

http://archive.plugins.jquery.com/project/lazyload是一个延迟加载插件列表，但它更多的是用于图像加载。
您可以尝试隐藏除前三个元素之外的每个blogpost元素，然后打开。

赞(0）回复(0）举报 2023-05-06

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帖子（我需要一些虚假内容才能在页面上滚动）。
它看起来像这样：

<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，它包含了前几篇文章，它让你在页面上滚动。在底部，您在footer中有一个more链接;即当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”。
当我的演示加载时，内容完全是空的，所以我继续获取我想要显示的第一个帖子。然后我告诉waypoint去监听页脚--每当页脚靠近的时候，我就去获取更多的帖子。
有一个棘手的部分，我做了$footer.waypoint('remove')，并传递了一个callback到loadMorePosts，它再次将waypoint绑定到footer。这只是一个技术问题-路点需要你删除触发器，而你获取更多的HTML，其他您的页面可能会采取滑稽...

赞(0）回复(0）举报 2023-05-06

我来回答

jquery 我如何延迟加载博客文章来保持页面大小？

5条答案

相关问题

热门标签

最新问答