CALLBACK после APPEND или как поймать окончание?

Question

[chelkaz]

Есть такой скрипт masonry.desandro.com/methods.html
Он подгоняет блоки на странице как в pinterest. Но все хорошо работает если функция выполняется после полной загрузки страницы. Но если блоки подгружать через Ajax, то часто они накладываются друг на друга.
Есть функция $container.masonry('layout'); Она перестраивает блоки когда изменился размер элемента, и все элементы должны быть сложены снова.
Я ее естественно запускаю после APPEND

$container.append( $content ).masonry( 'appended', $content, true );
$container.masonry('layout');

Но дело в том, что APPEND то создается мгновенно и как я понимаю блоки еще не рассчитаны полностью по высоте.
И функция $container.masonry('layout'); выполняется ДО того как все расставится.
Если я ее выполняю вручную в консоле после полной загрузки, то она всегда работает.
Как можно отследить когда APPEND готов и все фото в нем загружены?
Или может есть подобный плагин с более полным функционалом именно для подгрузки блоков через Ajax?

Answer 1

[Briss]

Если у вас в блоках имеются картинки, используйте imagesLoaded, пример есть на сайте Masonry.

Вот кусок кода из старого проекта:

Инициализация масонри:

masonry: function () {
            var _this = this;
            this.$grid = $('.feed').masonry({
                itemSelector: '.box-message',
                transitionDuration: 0
            });
            this.$grid.imagesLoaded().progress(function () {
                _this.$grid.masonry('layout');
            });
        }

Добавление новых элементов:

this.$grid.prepend(_this.$newFeeds).imagesLoaded().progress(function () {
                _this.$grid.masonry('reloadItems').masonry('layout', _this.$newFeeds);
            });