Question

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

请知道如何实现这一目标？

Answer 1

注意不确定html结构，css，现有js文档，在原始帖子中不显示html。

html下面改编自Infinite Scroll Without External Content，也许是类似的问题？

试试这个（模式）

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()
    })
});

jsfiddle http://jsfiddle.net/guest271314/bG5N8/

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

1 个答案: