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

Question

Currently, my client's website has a "Load more" button, linked to the Shutterstock API to load more photos everytime you click on that button.

My client asked to change this into "When the user scrolls down, it loads automatically more images".

So what I thought, since I'm not an experienced coder, is to add a function linked with window.scroll that would trigger a click on that button once you reach the top of that button, using the following code:

    $(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
}

});

The issue, is that once the button is in view, it triggers the click multiple time, and it loads the next 6 images multiple times back to back. I guess it's clicking multiple time since the button stays in view, not sure how to handle this.

The code for the "load more" function that works linked to that "load_more_images" button is in a "func.php" page (it's for a Wordpress site, and it's in a plugin) :

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

Any idea how I could make this work? All I need is to activate that existant function that is currently bound to a click event, but on scroll, when I reach that button, or a certain element in the page at the bottom.

Thanks a lot

Answer 1

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

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