将“单击以加载更多”替换为滚动以加载更多

Question

目前，我客户的网站有一个“加载更多”按钮，链接到 Shutterstock API 以在您每次点击该按钮时加载更多照片。

我的客户要求将其更改为“当用户向下滚动时，它会自动加载更多图像”。

所以我的想法是，由于我不是经验丰富的编码员，所以我想添加一个与 window.scroll 链接的函数，一旦您到达该按钮的顶部，就会触发对该按钮的点击，使用以下代码：

    $(window).scroll(function() {
var top_of_element = $("#load_more_images").offset().top;
var bottom_of_element = $("#load_more_images").offset().top + $("#load_more_images").outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();

if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
    $("#load_more_images").trigger("click");
}
else {
    // The element is not visible, do something else
}

});

问题在于，一旦按钮在视图中，它会触发多次点击，并且会多次背靠背加载接下来的 6 张图像。我猜它是多次单击，因为按钮保持在视图中，不知道如何处理。

链接到“load_more_images”按钮的“加载更多”功能的代码位于“func.php”页面中（它用于 Wordpress 网站，并且位于插件中）：

jQuery("#load_more_images").click(function() {
            jQuery(this).hide();
            jQuery(".load_more_wrapper .loader").show();
            var ajax_url = "'.admin_url('admin-ajax.php').'";
            jQuery.post(
                        ajax_url,
                        {
                            "action": "pd_load_more_img",
                            "data": {
                                "type": search_type,
                                "page":page+1,
                                "image_type": "'.(isset($_GET["image_type"]) ? $_GET["image_type"] : "all").'"';

                            if (isset($_GET['category'])){
                                $js.=',
                                "category":'.$_GET['category'];
                            }
                            if (isset($_GET['search'])){
                                $js.=',
                                "search":"'.$_GET['search'].'"';
                            }
                $js.= '}
                        },
                        function(data){
                            page++;
                            jQuery("#images_container").append(data);
                            jQuery(".load_more_wrapper .loader").hide();
                            jQuery("#load_more_images").show();
                            jQuery(".category-link").dotdotdot();
                        }
                    );
        });';

知道我该如何完成这项工作吗？我只需要激活当前绑定到单击事件的现有函数，但在滚动时，当我到达该按钮或页面底部的某个元素时。

非常感谢

Answer 1

您可以使用该功能代替您的点击功能：-

$(window).scroll( function(e){  if($(window).scrollTop()>= jQuery('#load_more_images').position().top){ doYourFunctionHere(); } }