Как реализовать подгрузку блоков, при прокруте странички?

Question

[Саша Улыч]

Нужен такой функционал, когда пользователь доходит до конца странички там есть кнопка загрузить еще, он нажимает ее и подгружаются посты. Внизу странички появляется иконка подгрузки и при прокрутке к ней подгружаются посты. Так реализовано в instagram.

$(window).scroll(function(){ 
    var scroll = $(window).offsetTop;
    var scrollto = $('#show-more').offsetTop;
 if (scroll > scrollto.top) $('#load-posts').show();
 });

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

Answer 1

[Денис Инешин]

Плагин Waypoints умеет это делать. Т.е. вызывать какой-то код при прокрутке до нужных на странице точек.

Но, имхо, это полный бред делать подобную тему, если все данные уже есть на странице. Фича актуальна ТОЛЬКО если действительно нужно подгружать контент по мере прокрутки, для того чтобы сэкономить изначальный вес страницы и ускорить загрузку.

UPD:
чтобы показать клиенту, можно сделать подгрузку данных из текстового файла с небольшой задержкой по setTimeout. Это будет полноценная симуляция итогового результата.

Answer 2

[Владимир Б.]

Я так понимаю необходимо что-то вида:

$( window ).bind( 'scroll', function( ) 
	{
		if( ( document.body.scrollHeight - window.innerHeight - $( this ).scrollTop( ) ) < 200 )
		{ 
			$( window ).unbind( 'scroll' );
			$('#load-posts').show();
		}	
	} );

Comments

[Владимир Б.]

Правда здесь сделано чтоб подгрузка начиналась немного раньше конца страницы.