jQuery masonry - метод вызова после перезагрузки кладки

Question

Я использую Twitter Bootstrap и jQuery Masonry для нового сайта в разработке. Я добавляю новые элементы в контейнер кладки.

элементы не являются ни добавляться или предваряется существующих детей, но в вставленный между ними, в зависимости от порядка сортировки, как это:

var elem = $(boxes[rand2]); 
$(".post").each(function(i){ 
    if(parseFloat($(this).data("weight"))<=weight){ 
     elem.insertBefore(this); 
     return false; 
    } 
    else if (i == $(".post").length - 1) { 
     elem.insertAfter(this); 
     return false; 
    } 
}); 

Это отлично работает до сих пор. То, что я хотел бы достичь, состоит в том, что элементы отображаются только тогда, когда они достигли места назначения. Я не хочу отключать анимацию, но пространство для нового элемента должно появиться (пустое), и только когда все будет переделано через кладку, должен появиться новый элемент.

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

$('#posts').masonry('reload',function(){ 
    alert('re-aligning finished'); 
}); 

, но это не работает, он стреляет рано.

Так на данный момент, я

$('#posts').masonry('reload',function(){ 
    window.setTimeout(showElem,500); 
}); 
function showPosts(){ 
    $('.post').show(); 
} 

и что, кажется, работает - но фиксированный 500мс тайм-аут не является реальным красивое решение ...

Таким образом, любые предложения?

Answer 1

Я предполагаю, что вы уже используете jQuery. Возможно, полезно использовать объекты deferred.

Answer 2

Не могли бы вы сделать это позже после загрузки документов?

(function($) { 
$(document).ready(documentReadyFunction); 
$(window).resize(windowResizeFunction); 
$(window).load(windowLoadFunction); 
function documentReadyFunction() { 
    //your inserted html here 
} 
function windowResizeFunction() { 
    //resize here 
} 
function windowLoadFunction() { 
    //do masonry here 
} 
})(jQuery);