Почему лагает скролл на странице?

Question

[komarevtsev]

У меня на странице динамически подгружаются около 2к картинок. После этого скорлл на сайте начинает очень сильно тупить. Размер каждой картинки около 60х60
Возможно есть какие-либо способы это исправить?

Answer 1

[GreatRash]

Это одна из основных проблем "бесконечного скролла". У вас всё время растёт DOM, каждая новая картинка отъедает память, естественно всё лагать начинает. Нужно прятать те картинки, которые не попадают во вьюпорт. Опять же нужно стараться, чтобы DOM-элементов было как можно меньше. В идеале только сама картинка.

Comments

[komarevtsev]

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

[GreatRash]

komarevtsev: Возможно. Поищите библиотеку или напишите самостоятельно.

Answer 2

[Денис Инешин]

Попробуйте поместить эти картинки на слой с translate3d

Comments

[komarevtsev]

не очень понимаю, как это может помочь? это же просто позиционка

[Денис Инешин]

komarevtsev: почитайте внимательней. Включает 3d-ускорение принудительно.

Answer 3

[Алексей A]

Вот есть отличная статья на эту тему (на англ.)
Complexities of an infinite scroller