无限滚动-在后台自动加载下一个特定数量的帖子

Infinite Scroll - auto load next certain number of posts in background

本文关键字：下一个 加载 滚动 后台 无限      更新时间：2023-09-26

我正在开发一个使用无限滚动的wordpress网站。它运行良好。但我需要做一些修改，以明显更快地加载。当网站完全加载时，我想再加载几个帖子，以便在后台自动加载（用户不知道加载了更多内容）。当他们到达页面底部（或单击加载更多帖子按钮）时，它会显示那些预先加载的帖子，然后系统再次开始在后台加载更多帖子，以此类推。通过这种方式，用户每次到达页面底部时都会看到快速的内容加载。

你知道如何做到这一点吗？

注意：不确定文档的html结构、css、现有js，不会在原始帖子中出现html。

下面的html改编自《没有外部内容的无限卷轴》，也许也有类似的问题？

试试这个（图案）

html

<!-- Visible to users -->
<article>Pretend this is a preview (1) for an article on a blog</article>
<article>Pretend this is a preview (2) for an article on a blog</article>
<article>Pretend this is a preview (3) for an article on a blog</article>
<!-- End of Page -->
<!-- Infinite Scroll Load (Was Hidden Now Visible) -->
<article>Pretend this is a preview (4) for an article on a blog</article>
<article>Pretend this is a preview (5) for an article on a blog</article>
<article>Pretend this is a preview (6) for an article on a blog</article>
<button id="articles">Click to view more articles</button>
<!-- End of Page -->

js（更新）

$(function () {
    $("body").css("height", $(document).height() + 1)
    // `.load()` additional articles
        .find("article").each(function (i, el) {
        $(el).not(":nth-last-of-type(n+4)").hide()
            .filter(":nth-of-type(4)").on("click.y", function () {
            $("body").animate({
                scrollTop: "0px"
            }, 1000)
        });
    });
    $(document).on("scroll.article", {
        "scrolled": false
    }, function (e) {
        if (!e.data.scrolled) {
            var el = $("article:nth-of-type(n+4)");
            $(el).show(1000);
            e.data.scrolled = true;
        };
        if (e.data.scrolled) {
            $(el).on("click", function (e) {
                $(e.target).hide(1000);
            });
        };
        if ($("article:nth-of-type(n+4)").css("display") === "none") {
            e.data.scrolled = false;
        };
        return false
    });
    $("#articles").on("click", $(document), function (e) {
            // `.load()` additional articles
        $(e.target).trigger("scroll.article").scroll()
    })
});

jsfiddlehttp://jsfiddle.net/guest271314/bG5N8/

相关文章：