Как убрать баг в галерее с плагином masonry?

Question

[Артём Митрофанов]

На сайте есть галерея, которая работает на библиотеке Masonry (кирпичная раскладка фотографий).
Галерея подгружается автоматически при скролле страницы.
При первичной загрузке страницы возникает баг, когда несколько фотографий не меняют своего положения через Masonry, в результате чего, накладываются друг на друга. При обновлении страницы 1-2 раза, баг пропадает.

Что нужно сделать, чтобы обрабатывались все элементы для расстановки?

Добавление фотографий происходит следующим куском кода:

// Append new blocks
function ThumbPreloading(...) {
 jQuery('.grid')
   .masonry()
   .append(DataPost)
   .masonry( 'reloadItems' )
   .masonry( 'layout' )
   .masonry({transitionDuration : 0});
}

Comments

[Артём Митрофанов]

Конфликтов нет, проверил.
Проблема решилась подключением еще одной библиотеки imagesloaded.
С таким куском кода, теперь, цепляются все изображения:

...
// Append new blocks
var $grid = jQuery('.grid')
   .append(DataPost)
   .masonry( 'reloadItems' , 'layout' )
   .masonry({transitionDuration : 0});
$grid.imagesLoaded().progress(function () {
   $grid.masonry();
});
...

Answer 1

[Lulzsec]

Почему Masonry.js накладывает изображения друг на друга?

Answer 2

[mletov]

1) Первое, что вызывает вопросы, зачем masonry вызывается аж 4 раза?
Для сравнения: в демках 1-2 раза, неужели логика на вашем сайте сильно сложнее демок? Попробуйте упростить.

2) Посмотрите на кол-во фоток и на их размеры. Возможно, скрипт просто не переваривает большие объемы.

3) Попробуйте запустить скрипт на чистой страничке, без доп скриптов, стилей и элементов верстки, возможно они как-то конфликтуют с галереей.