Infinte scroll для динамически добавляемых данных

298

20 марта 2017, 09:03

Как можно реализовать бесконечную прокрутку на странице, на которой динамически добавляются данные? Например, при загрузке страницы отправляется запрос к API, который возвращает json-массив из 50 элементов. Я хочу, чтобы первые 10 элементов были выведены на страницу при помощи append(), а остальные добавлялись на страницу декадами при прокрутке вниз. Вывести всё сразу и сделать остальным блокам display:none и отображать по прокрутке - не вариант - сильно просядет производительность. Не выведенные данные нужно где-то хранить и из этого места подгружать. Но где именно можно хранить эти данные?

Answer 1

сохранить элементы в глобальной переменной, а оттуда тянуть по событию скролла вниз.. (сэкономишь немного времени только на выводе на экран, но по памяти будет одинаково);
делать запросы при прокрутке вниз заранее (дошел до 70% страницы, отправил запрос, и как раз все подрузится пока докрутишь.

P.s. не делай только чтобы сразу подгружало.. сделай кнопку "загрузить ещё". Как кликнут, тогда и делай бесконечную подгрузку)) иначе никто никогда не увидит твой футер (при условии большого кол-ва элементов). Я вот например на пикабу не смог увидеть футер не прибегнув к хитростям))))