Как решить проблему с медленной Ajax загрузкой Masonry?

Question

[Sergey750il]

Доброго времени суток. Настроил Ajax подгрузку постов на библиотеке Masonry. Но проблема в том, что блоки адаптивные и не могу задать жестко высоту, поэтому использую скрипт imagesLoaded, который запускает работу Masonry, только после загрузки всех картинок. В итоге Ajax работает очень медленно тк проходит ожидание загрузки картинок. Как правильно поступить?

Comments

[Dmitry Bay]

Есть идея такая:
При загрузке изображения, узнавать его соотношение сторон, или размеры, и задавать размеры изображения до его загрузки.

[Sergey750il]

Dmitry Bay, Не получилось. Задал размеры изображений, но они друг на друга наезжают.

[Dmitry Bay]

Sergey750il, как задали? если задать на уровне inline style, должно быть ок.

[Sergey750il]

Dmitry Bay,

<img src="http://test.local/wp-content/uploads/2019/11/IMG_2464-688x440.jpg" alt="" style="width: 688px; height: 440px;">

Но изображения теперь не адаптивные

[Dmitry Bay]

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

Как вариант, вы можете переложить частично это на js.
К примеру, ставите параметр для изображения data-ratio, с соотношением сторон. Если он уже записан в системе, то выводите как надо. Если его нет, то после загрузки изображения, формируете массив блоков соотношений и обновляете у себя.

еще два варианта придумал
1) кроппить на сервере к единому формату.
2) использовать обертку, и в нем через background-image использовать ваше изображение. тогда оно не будет зависеть от начального изображения.

[Dmitry Bay]

Sergey750il, получилось?

[Sergey750il]

Dmitry Bay, Сделал через CSS. Добавил родительскому блоку с картинкой padding-top в %, а картинке задал абсолютное позиционирование.