@Befref

Что поменять чтобы ajax подгрузка работала от скроллинга?

Есть код ajax подгрузки, работающий от нажатия на ссылку. Что поменять, чтобы подгружалось при достижении конца блока div?
То есть, как правильно прописать условие?

$('body').on('click', '[data-js-showmore-products="1"]', function(e){
				var url = $(this).attr('href');
				if (url.indexOf('?') == -1){
					url = url + '?m=1';
				} else {
					url = url + '&m=1';
				}
				catalogFilter.updateFilters({
					'url': url
				});
				e.preventDefault();
			});
  • Вопрос задан
  • 223 просмотра
Пригласить эксперта
Ответы на вопрос 2
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer
Ну я бы не делегировал click через body, а повесил непосредственно на [data-js-showmore-products="1"]. Потом берём высоту нужного div от топа - offset().top и сохраняем в переменную, задаём event $(window).scroll и в его колбэке чекаем когда низ окна $(window).height() + $(window).offset().top достигнет низа нужного div, сохранённого ранее. Если он равен (а лучше больше или равен - скролл довольно резкий ивент) то вешаем триггер на существующий click ($([data-js-showmore-products="1"]).trigger('click')). Таким образом кнопку Показать ещё можно оставить как фоллбэк для тех, у кого вдруг чё не заработает.
Всё это, естественно оформляем ниже уже написанного клика чтоб триггер увидел event на [data-js-showmore-products="1"]

UPD или даже ещё круче - советуемый мной способ завернуть в отдельную функцию и вызывать если юзер сам захочет бесконечный скролл. То есть добавить в интерфейс чекбокс типа "активировать бесконечную прокрутку" и повесить на него ивент с этой функцией
Ответ написан
KazeZlat
@KazeZlat
Погромист-затейник
1. Поменять $('body').on('click') на $('html, body').on('scroll')
2. URL запроса запрятать вместо ссылки в какой-нибудь data-аттрибут на элементе с id. Например на контейнере того, что вы подгружаете.
3. Добавить условие, чтобы callback выполнялся только при подходе к нижней границе контента. Тут есть несколько вариантов, сравнивать позицию нижней границу окна с позицией конца страницы, или определить элемент, при появлениии которого в поле зрения можно начинать подгрузку.
4. Не забывайте, что до окончания подгрузки вам желательно больше не отправлять ajax-запросов, поэтому можно добавить флаг, который перед ajax будет устанавливаться в значение true, а на 'complete-событии ajax-а снова сбрасываться в false
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы