1

Скажите, пожалуйста, как можно реализовать бесконечный скроллинг для сайта, как на фейсбуке и твиттере. Помогите, пожалуйста. То есть надо, чтобы человек скроллил вниз, у него появлялась картинка о загрузке, и cразу подгружался контент, при том всё это на javascript?

4
  • 1
    Спасибо за разрешение.
    – evlanoff
    8 дек 2012 в 9:21
  • 1
    интересно, а что произойдёт если посмотреть код, не получив разрешения? 8 дек 2012 в 9:54
  • По-теме: Просто догружаешь данные динамически с помощью ajax, генерируешь html-элементы, добавляешь в конец страницы. Ну а пока грузится ajax можно вставить элемент изображающий загрузку. В каком месте проблемы? 8 дек 2012 в 9:55
  • бесконечный скролл - зло
    – Spectre
    9 дек 2012 в 10:29

4 ответа 4

2

Как то делал такое, говнокод конечно же, но я тогда учился только

    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
2
  • Раз говнокод, так зачем выкладывали? Говнокодеров плодить?
    – Salivan
    8 дек 2012 в 14:21
  • 4
    Почему сразу плодить, просто принцип работы показать. Если немного переделать, например убрать все в одну функцию, то вполне даже годный вариант может получится. 8 дек 2012 в 16:34
0

ищите в гугле, вот первая же ссылка

0

Вот небольшой примерчик набрасал.

0

Попробуйте через ajax. Подгрузка странички

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.