Endless scrolling

As I did this, of course, but then I only studied

setInterval('scroll();', 250); // Вместо onscroll используем таймер, так как некоторые браузеры немного подвисают var next = "2", loading = false; // Объявляем переменные next - страница, котору нам надо загрузить, loading во время подгрузки true function scroll() { if (loading) return; // если уже грузится останавливаем функцию if (window.pageYOffset > (document.body.offsetHeight - 3500)) { // если скролл ниже высота_страницы - 3500, то load_feed(next); // запускаем функцию загрузки, передавая переменную page } } function load_feed(m) { if (!m) return; // если не передана страница, которую надо загрузить или она ложь, то останавливаем loading = true; // говорим, что пошла загрузка $("#feed_" + m).html('<center>Загрузка...</center>'); // пишем загрузку $.ajax({ url: "/ajax/feed.php?page=" + m, // ajax запрос success: function (r) { // если все хорошо, то сервер должен вернуть JSON {html:"код подгружаемого кусочка", next:"номер следующей страницы"} eval('s=' + r + ';'); // превращаем этот ответ сервера в объект $("#feed_" + m).html(s.html); // вставляем этот кусок if (s.error) return console.log(s.error); // если сервер вернул ошибку, пишем в консоль (в моем случаи это {error:"Описание ошибки"}) next = s.next; // изменяем значение следующей страницы loading = false; // говорим, что ничего уже не грузится } }); } html: <div id="feed_2"></div> Примечания: в конце подгружаемого кусочка должен быть <div id="feed_(номер следующей страницы)"></div>, 3500 самый оптимальный вариант, для текста, поскольку пользователю почти не приходится ждать, но если используются тетрис из изображений, например галерея или каталог товаров, то лучше это уменьшить до 500..1000