Масонство, ImagesLoaded и InfiteAjaxScroll

Question

Я использую скрипты масонства, изображений, загруженных и InfinteAjaxScroll на моей странице. Я не знаю, как вставить ImagesLoaded функцию здесь:

var container = document.querySelector('.products'); 
    var msnry = new Masonry(container, { 
     // options 
     itemSelector: '.product', 
     columnWidth: '.column-sizer', 
     percentPosition: true 
    }); 

var ias = $.ias({ 
    container: ".products", 
    item: ".product", 
    pagination: ".woocommerce-pagination", 
    next: "a.next", 
    delay: 600, 
    negativeMargin: $(window).height() 
}); 

ias.on('render', function(items) { 
    $(items).css({ opacity: 0 }); 
}); 

ias.on('rendered', function(items) { 
    msnry.appended(items); 
}); 

ias.extension(new IASSpinnerExtension()); 
ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'})); 
}); 

ImagesLoaded пример функции на масонство странице документации:

// init Masonry 
var $grid = $('.grid').masonry({ 
    // options... 
}); 
// layout Masonry after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
}); 

Answer 1

Вы могли бы использовать:

ias.on('rendered', function(items) { 
    msnry.appended(items); 
    msnry.masonry('reloadItems'); 
}); 

var $container = $('#grid');  
$container.imagesLoaded(function(){ 
    $container.masonry(); 
});