將“單擊以加載更多”替換為滾動以加載更多

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

知道我該怎么做嗎？ 我需要的是激活當前綁定到click事件的現有功能，但是在滾動時，當我到達該按鈕或底部頁面中的某個元素時，就可以滾動該功能。

非常感謝

Answer 1

您可以使用該功能代替點擊功能：-

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