[HTML5] Бесконечная лента

onscroll. К HTML5 это не имеет отношения.

По мере прокручивания ленты делать ajax запросы, по определенному количеству записей, например 50, хранить их в хеше, в dom генерить html только для тех записей, которые показываются прямо сейчас. Те записи, которые прокрутились до определенного состояния вверх или вниз удалять из dom. Придется расчитать общую высоту для полосы прокрутки.

Вообще мне сложно представить себя прокручивающим 500000 записей.

Причем тут onscroll? ЕМНИП это обработчик скролинга мышью. Мне надо чтобы сама лента бесконечно шла, думал эту анимацию делать на canvas.

у твиттера виджет такой есть, если я не ошибаюсь. в нем прокручиваются твиты из ленты пользователя. думаю, оттуда можно позаимствовать многое.

По мере прокручивания ленты делать ajax запросы, по определенному количеству записей

Я тоже над этим думал, но никак не могу найти вменяемого способа сделать саму ленту.

А как называется виджет? И на чем он написан?

jquery
.append

Мне надо чтобы сама лента бесконечно шла, думал эту анимацию делать на canvas

И думал, что это будет быстрее пачки дивов?
И при чём здесь html5?

Да, то что нужно. Спасибо. Но все равно самое главное либа для плавной, красивой отрисовки ленты.

дрожать будет на удалении из головы списка

надо как-то соорудить клиппинг через divы в divе

Здесь можно и без html5 все решить: динамически создаем нижние блоки, а верхние - удаляем. Информацию о содержимом новых блоков получаем POST-запросами.

Я так когда-то делал выдачу отладочных сообщений на веб-интерфейсе управления железом.

гугль:// CSS3 jquery animation

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

И думал, что это будет быстрее пачки дивов?
И при чём здесь html5?

Ты не понял, видел единственное вменяемое решение в 30 строк на HTML5, ему скармливается пачка дивов и он сам занимается анимацией. HTML5 при том, что это отрисовывается в элементе HTML5, который называется «canvas»;

https://twitter.com/about/resources/widgets/widget_list

событие кручения колеса мыши

Многие не поняли - пользователь в анимации не участвует. Вообще за мышку не держится, просто идет бесконечная лента, куда он иногда может тыкать, чтобы заполнять информационный блок какими-то данными.

Спасибо, посмотрю.

Ты тоже немного не понял что мне надо.

[HTML5] Бесконечная лента (комментарий)

А, дык тогда еще проще: рисуем блок на всю страницу (чтобы никаких скролов не было), в нем распихиваем блоки нашей ленты. Каждые n миллисекунд по таймеру инкрементируем абсолютное положение блоков по вертикали, а как только верхний блок полностью скроется с глаз долой, добавляем снизу очередной блок.

Чтобы не было рывков снизу, добавляем блоки «на всякий случай» в полтора раза больше заранее.

Никаким html5 здесь и не пахнет.

Можно, конечно, еще как вариант вставить SVG или canvas и в нем рисовать. Но бритва Оккама вырезает этот вариант.

Вернее это я хреново объяснил. Самый близкий аналог - титры из звездных войн. Только бесконечная эта лента. Т.е. на экране одновременно 30-40 записей, которые поднимаются вверх и удаляются. А нижние подгружаются.

Кстати, а в CSS3 случайно нет свойства анимации?

А то было бы еще проще: div'ы перемещаются CSS'кой, а от нас требуется лишь «дозаправлять» ленту. Ну и останавливать ее, если внутри щелкнули.

рисуем блок на всю страницу

Не вариант, т.к. в ленте есть ссылки, которые изменяют блок справа.

Каждые n миллисекунд по таймеру инкрементируем абсолютное положение блоков по вертикали, а как только верхний блок полностью скроется с глаз долой, добавляем снизу очередной блок.

Это будет плавно и красиво?

Кстати, во всех браузерах был «косяк» с удалением неиспользуемых элементов (они попросту остаются болтаться в памяти). Так что, со временем браузер станет жрать оочень много памяти и в конце-концов отвалится.

Проверено ☺

Кстати, во всех браузерах был «косяк» с удалением неиспользуемых элементов (они попросту остаются болтаться в памяти). Так что, со временем браузер станет жрать оочень много памяти и в конце-концов отвалится.

А использование canvas не решит проблему?

Это будет плавно и красиво. А при абсолютном позиционировании можно просто воткнуть блок-контейнер, который будет себе поверх страницы плавать, не влияя на ее прокрутку.

ХЗ, может быть и решит. Если только браузер не будет хранить результаты всех предыдущих запросов. А сдается мне, эту дыру до сих пор ни в одном браузере не ликвидировали.

А: можно динамику при помощи вебсокетов сделать. Там, вроде бы, мусор нормально подчищается.

что если запихнуть в iframe, а этот iframe перегружать там раз в десять минут?

Спасибо, еще вопрос. Загружать всю инфу из БД ты советуешь сразу или по мере необходимости? Сразу - проще, но как это повлияет на производительность? Или 500 000 записей не так уж и много?

Вот так и приходится выкручиваться.

Вот только при перезагрузке возникает мелькание.

Загружать всю инфу из БД ты советуешь сразу или по мере

необходимости?

По мере необходимости, конечно. Если делать через вебсокеты, то просто запрашивать очередную запись при формировании нового блока; если же делать через POST-запросы, можно, чтобы сэкономить на количестве запросов, загружать «пачку» данных, а как только она кончится, подгружать новую.

эммм, ну тащемта всякие фейсбуки при скролле делают добавление в DOM новых дивов и получается лента.

Я объяснил по-понятнее что мне надо.
[HTML5] Бесконечная лента (комментарий)