Question

我使用wordpress + timber + twig，我有以下问题。我在屏幕上加载了9个第一张图像，在我向下滚动之后需要再显示10张图像，等等。我在functions.php中有一个正确的功能，因为它总是输出我需要的右边10张图像。但我无法在.twig文件中定义正确的jQuery函数。我试图使用航点，但它输出一个错误：＆＃34;未捕获错误：没有元素选项传递给Waypoint构造函数＆＃34;。据我所知，它发生了，因为并非所有的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 %}
            });

JQuery Ajax + Waypoints不起作用

1 个答案: