Почему masonry сетка не полностью срабатывает при загрузке?

Question

[Чёкатилло]

Здесь

при загрузке страницы превьюшки не сразу выстраиваются должным образом
Кажется дело в вспомогательном скрипте imagesloaded.pkgd
Насколько знаю, скрипт определяет заранее величину изображений..

$(document).ready(function() {

  var $boxes = $('.loop');

  var $container = $('#content_masonry');
  $container.imagesLoaded( function() {
    $boxes.fadeIn(100);

    $container.masonry({
        itemSelector : '.loop',
        columnwidth: 330,
        gutter: 26,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransitions
    });    
  });
});

Но я не знаю решения
Помогите плиз =)

Спасибо за внимание

Comments

[Kovalsky]

Отвечая на вопрос "Почему masonry сетка не полностью срабатывает при загрузке?" - потому что у вас в коде написано что-то типа "построить masonry сетку когда все картинки загрузятся".

Нужно как-то по-другому?

[Чёкатилло]

Никита Полевой, блин :D че правда? Ну надо что б сразу строилась сетка
я нуб )

[Чёкатилло]

Никита Полевой, я правд не язвил Прост удивлен простому факту ) Спасибо за плодотворное участие )

[Kovalsky]

Баба Яга, я вынес комментарий в ответ, т.к. мне почему-то кажется что последний вариант это как раз то что нужно вам.

Answer 1

[Kovalsky]

Если нужно чтобы сетка инициализировалась моментально, то одно из решений уже привели - фиксировать размеры изображений (блоков). Ещё одно возможное решение - добавлять блок в сетку только тогда, когда соответствующее изображение загрузится. По вкусу можно приправить анимашкой при добавлении элемента, прелоадером и т.д.

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

Comments

[Чёкатилло]

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

[Kovalsky]

Баба Яга, если речь о том чтобы каждая картинка по загрузке добавлялась с анимашкой, то стоит учитывать что в таком варианте пользователь сначала увидит пустой блок, картинки в него добавятся чуть позже. Если первые несколько картинок загружать в base64, то этого можно избежать.

Нет, поблизости нет.

Answer 2

[Егор Бадулин]

Masonry срабатывает до того, как загрузятся картинки.
Приведу способы решения сей проблемы отсюда:

Способ 1

Установить для всех изображений размеры жестко: ширину и высоту в пикселях.

Способ 2

Повесить обработку Масонри на событиеload. Код для jQuery:

jQuery(window).load(function(){
jQuery('.masonry').masonry({ columnWidth:310, itemSelector:'.box, .item' });
});
Минус этого способа в том, что тут скорее всего придется ждать загрузки всего "окна": jQuery(window).load. Использовать load отдельно для элемента редко допустимо, потому что jQuery будет интерпретировать его как AJAX функцию load. Чтобы этого избежать используйте 3-й пример.

Способ 3

Инициализировать работу Масонри, после того, как все картинки будут загружены. А для проверки загрузки использовать дополнительный JS скрипт imagesLoaded. Код:

var container = document.querySelector('#container');
var msnry;
// Инициализация Масонри, после загрузки изображений
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
Код для jQuery:

var $container = $('#container');
// Инициализация Масонри, после загрузки изображений
$container.imagesLoaded( function() {
$container.masonry();
});
Заметка: также ошибка может быть при использовании дополнительных шрифтов, поэтому загрузку шрифтов нужно проверять.

Comments

[Kovalsky]

"Masonry срабатывает до того, как загрузятся картинки. " - нет, после. К тому же в исходном коде как раз присутствует imagesLoaded. Но да - фиксированные размеры это одно из решений.