Lazy scrolling jquery

Question

Итак, я пытаюсь реализовать ленивую прокрутку с помощью jQuery, выбирая элементы по мере необходимости с сервера. Так вот как я это делаю.

• Определите конец страницы, сделайте вызов сервера, чтобы получить еще N элементов.
• Затем очистите элементы div и установите scrollTop в верхнюю часть div.
• Когда пользователь хочет вернуться назад, предыдущие списки снова совершают вызов сервера для извлечения элементов.

Вот краткий код.

if ((scrollHeight - scrollPosition)/scrollHeight === 0) 
    { 
     //end of the page,scrolling down retrieve N more listings 
     doRequest("down"); 

    } 

    if(jQuery(window).scrollTop() == 0) 
    { 
     //top of the page,scrolling up 
     doRequest("up"); 
    } 
    }); 

function doRequest(scroll_dir) 
{ 

    if(scroll_dir == "down") 
    { 
     if(jQuery("#detail").length) 
      listing_id = jQuery("#detail input").last().val(); 
    } 
    else if(scroll_dir == "up") 
    { 
     if(jQuery("#detail").length) 
      listing_id = jQuery("#detail input").first().val(); 

    } 
    jQuery.ajax({ 

    type: "GET", 
    url: url, 
    data: {params:params,start:listing_id,scroll_direction:scroll_dir}, 
      success: function(results) 
      { 

      if(results.length > 0) 
      { 
      jQuery('#detail').html(""); 
      } 

      //load the results 
      //append to div,jQuery('#detail').append(data); 
      //code skipped for brevity 

     scrollTop = jQuery("#detail").offset().top; 

     jQuery(window).scrollTop(scrollTop); 

     } , 

     }); 
} 

Поэтому у меня есть внутренний контроллер, который принимает идентификатор листинга с направлением прокрутки и возвращает результат.

Таким образом, нисходящая прокрутка происходит нормально, но когда я прокручиваю вверх, необходимо обнаружить эту точку, чтобы сделать вызов сервера, чтобы отложить N-1 до N-10. Но мне трудно, что точка, где я нужно позвонить, так как jQuery(window).scrollTop() == 0 не работает хорошо для мобильных телефонов?

Любые библиотеки, которые уже делают это? Любая помощь была бы полезной. Спасибо.

Answer 1

Существует большая ошибка в вашей ленивой логике загрузки.

Проблема с вашим подходом:

1. Ваш шаг 1 это хорошо, но есть главная проблема в шаге 2 и 3.

2. Начиная с шага 2, его плохая идея очистите существующие элементы в текущем представлении или div и загрузите новые элементы, так как вам может понадобиться загрузить их снова при прокрутке вверх, как в вашем случае.

Лучшее решение:

• Append или Продлить новые элементы в существующее место списка вопросов, которые уже загружены на экране, так что вы не в конечном итоге загрузки те же элементы снова, когда прокручивается

• Также он улучшает производительность ваших сайтов, так как вы загружаете товары только один раз, независимо от того, сколько раз страница прокручивается пользователем вверх и вниз. не

Примечание: Есть Нет в JavaScript/JQuery плагин для ленивых функциональных нагрузок с большим количеством функций, которые будут заботиться о всех ваших проблем с производительностью. «Постарайтесь не переустанавливать колесо»