vetsmen

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

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

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

Как скрыть скролл?

Используй не процентное соотношение, а пиксельную величину.
Т.е. https://jsfiddle.net/4qn2Lnht/7/

Создай в DOM дереве

<style type="text/css">
   .your_class { background: [color] }
</style>

и при загрузке страницы заменяй строку [color] на нужный цвет. Как это сделать - это уже от шаблонизатора зависит, там разные стили ввода переменных, если его нет - можно обычным str_replace() сделать.
А выборка цвета - это уже фронт, погугли какие-нибудь js библиотеки.