Question

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

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

所以我认为，因为我不是一个有经验的编码器，所以添加一个与window.scroll链接的功能，一旦到达该按钮的顶部，就会触发点击该按钮，使用以下代码： / p>

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

知道如何让这项工作成功吗？我只需要激活当前绑定到click事件的existant函数，但是在滚动时，当我到达该按钮时，或者在底部页面中的某个元素时。

非常感谢

Answer 1

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

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

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

1 个答案: