JQuery Ajax + Waypoints 不起作用

Question

我使用 wordpress+timber+twig，但遇到以下问题。我已经在屏幕上加载了 9 个第一个图像，向下滚动后它需要显示 10 个以上的图像，等等。我在 functions.php 中有一个正确的函数，因为它总是输出我需要的正确的 10 个图像。但我无法在 .twig 文件中定义正确的 jQuery 函数。我正在尝试使用航点，但它输出错误：“未捕获的错误：没有元素选项传递给航点构造函数”。据我了解，它发生了，因为并非所有 DOM 树都已加载，并且浏览器没有看到航点所需的节点。现在它输出正确的图像，但同时 - 不是 10 后 10。如何加载 div 块并将航点绑定到最后一个 div，以便浏览器可以看到它？或者也许有更简单的出路？这是我不理想的代码。 :) 提前谢谢！

   jQuery(document).ready(function ($) {
                var ajaxUrl = "{{ fn('admin_url', 'admin-ajax.php') }}";

                function add_posts(img_link, key) {
                    $(".gallery-ajax").append(
                        '<div class="img-container" id="img-container' + key + '">' +
                        '<a data-fancybox="gallery" id="image' + key + '" href="' + img_link + '">' +
                        '<img src="' + img_link + '">' +
                        '</a>' +
                        '</div>'
                    );
                }

                function ajax_call(page, ppp) {
                    $.post(ajaxUrl, {
                        action: "more_post_ajax",
                        page: page,
                        ppp: ppp

                    }).success(function (data) {


                        $.each(data, function (key, val) {
                            add_posts(val.img_link, val.skaitliukas);
                            console.log(val);
                            Waypoint.refreshAll();
                        });

                        if (page + 1 < len) {

                            page = page + ppp;

                            waypoint = new Waypoint({
                                element: document.getElementById("img-container" + page),
                                handler: ajax_call(page, ppp),
                                offset: 'bottom-in-view'
                            });

                        }
                    })
                }

                // The index of the last image loaded.
                {% if post.gallery | length >=9 %}
                var page = 8;
                {% else %}
                var page = 10;
                {% endif %}

                // Post per page
                var ppp = 10;

                var len = {{ post.gallery | length }};
                var waypoints = [];
                var waypoint;

                waypoint = new Waypoint({
                    element: document.getElementById('img-container' + page),
                    handler: function () {
                        console.log("Page equals " + page);

                        jQuery.post(ajaxUrl, {
                            action: "more_post_ajax",
                            page: page,
                            ppp: ppp

                        }).success(function (data) {


                            jQuery.each(data, function (key, val) {
                                add_posts(val.img_link, val.skaitliukas);
                                console.log(val);
                                Waypoint.refreshAll();
                            });

                            page = page + ppp;

                            waypoint = new Waypoint({
                                element: document.getElementById("img-container" + page),
                                handler: ajax_call(page, ppp),
                                offset: 'bottom-in-view'
                            });


                        });

                    },
                    offset: 'bottom-in-view'
                });

            });

Answer 1

实际上，我通过在页面末尾仅定义一个航点解决了我自己的问题。当到达路点时，它会进一步移动 5 幅图像，因此路点可以一次又一次地加载。这是我的代码：

            jQuery(document).ready(function ($) {
                var ajaxUrl = "{{ fn('admin_url', 'admin-ajax.php') }}";

                function add_posts(img_link, key) {
                    $(".gallery-ajax").append(
                        '<div class="img-container" id="img-container' + key + '">' +
                        '<a data-fancybox="gallery" id="image' + key + '" href="' + img_link + '">' +
                        '<div class="img-small3">' +
                        '<img class="img-responsive" src="' + img_link + '">' +
                        '<div class="arrow-hover"></div>' +
                        '</div>' +
                        '</a>' +
                        '</div>'
                    );
                }

                // The index of the last image loaded.
                {% if post.gallery | length >=9 %}
                var page = 8;


                // Post per page
                var ppp = 5;

                var len = {{ post.gallery | length }};

                var waypoint;


                waypoint = new Waypoint({
                    element: document.getElementById("ajax-line"),
                    handler: function () {
                        if (page < len) {
                            jQuery(".loader-wrap").fadeIn();
                            jQuery.post(ajaxUrl, {
                                action: "more_post_ajax",
                                page: page,
                                ppp: ppp

                            }).success(function (data) {


                                jQuery.each(data, function (key, val) {
                                    add_posts(val.img_link, val.skaitliukas);

                                });
                                page = page + ppp;
                                Waypoint.refreshAll();
                                jQuery(".loader-wrap").fadeOut();

                            });
                        }
                    },
                    offset: 'bottom-in-view'
                });



                {% endif %}
            });