Скажите, пожалуйста, как можно реализовать бесконечный скроллинг для сайта, как на фейсбуке и твиттере. Помогите, пожалуйста. То есть надо, чтобы человек скроллил вниз, у него появлялась картинка о загрузке, и cразу подгружался контент, при том всё это на javascript?
-
1Спасибо за разрешение.– evlanoff8 дек 2012 в 9:21
-
1интересно, а что произойдёт если посмотреть код, не получив разрешения?– Vladimir Gordeev8 дек 2012 в 9:54
-
По-теме: Просто догружаешь данные динамически с помощью ajax, генерируешь html-элементы, добавляешь в конец страницы. Ну а пока грузится ajax можно вставить элемент изображающий загрузку. В каком месте проблемы?– Vladimir Gordeev8 дек 2012 в 9:55
-
бесконечный скролл - зло– Spectre9 дек 2012 в 10:29
Добавить комментарий
|
4 ответа
Как то делал такое, говнокод конечно же, но я тогда учился только
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
-
-
4Почему сразу плодить, просто принцип работы показать. Если немного переделать, например убрать все в одну функцию, то вполне даже годный вариант может получится.– Вячеслав8 дек 2012 в 16:34