Как вернуться в позицию элемента, после добавлении новых элементов выше него (scrollTo после prepend)?

Question

[Vitaliy Orlov]

Приветствую,

Сразу начну с примера, т.к. что-то описание большое получилось:
- https://jsfiddle.net/orlov0562/d6hnxqtk/
- Надо чтобы, при нажатии на "Load 10", перемотка была к посту отмеченному синим

Исходные данные:
- Есть лента, в неё грузятся элементы-посты, содержащие в себе картинку + текст
- Картинка масштабируется по ширине ленты и ее высота заранее неизвестна. Т.е. высота элемента "пост", неизвестна пока не загрузится картинка.
- Вверху ленты есть кнопка "Показать новые посты"

Задача: Нужно при нажатии на кнопку "Показать новые посты", загрузить эти посты и вернуться к первому элементу ленты, который был отображен до нажатия кнопки. А точнее, задача в целом, даже не вернуться, а оставить его в той же позиции на экране, при этом добавив постов сверху.

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

Варианты решений, которые я вижу:

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

2) Есть еще вариант, с перемоткой после отслеживания onload у всех изображений. Но, он выглядит дико, если представить одновременную загрузку, например 50 gif-ок по 10-20 мб каждая.

Пример: https://jsfiddle.net/orlov0562/d6hnxqtk/
- Демонстрация проблемы: Нажми "Load 10"
- Как должно работать: Нажми "Load 10 (delayed)"

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

Answer 1

[vetsmen]

1) Как ты и сказал в объекте с новым постом добавлять параметры размера изображения, тем самым не дожидаясь загрузки можно будет точно определить новое положение скролла с сохранением позиции старого блока относительно экрана.
При этом нужно будет при обновлении DOM дерева для каждого нового поста до полной загрузки изображения прописывать ее высоту в стилях.

2) Второй вариант имел бы место быть, если выводить каждый пост по отдельности, при отслеживании onload изображения этого поста (инициализируем пост в DOM -> ждем загрузку изображения -> делаем скролл -> инициализируем следующий пост в DOM дерево), однако при плохом интернет соединении или при изображениях большого размера контент будет прыгать туда сюда.
При отслеживании onload на всех изображениях сразу минусы ты уже сказал.

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

Comments

[Vitaliy Orlov]

В конечно итоге, тоже пришел к тому, что надо хранить высоту медиа элементов.

Для тех кто столкнется с похожей проблемой:
Временно, решил её при помощи рекурсии. После прокрутки проверяю находится ли скролл в нужной позиции и если нет, запускаю прокрутку еще раз, вот обновленный пример: https://jsfiddle.net/orlov0562/d6hnxqtk/48/, кнопка "Load 10 (temp)" .