Объединение Flexslider с масонством

Question

Я объединил некоторые jQuery: Flexslider и масонство. FlexSlider инициируется global.js:

$(window).load(function() { 

    // Banner FlexSlider 
    $('#side-slider').flexslider({ 
     animation: 'slide', 
     slideshow: true, 
     smoothHeight: false, 
     controlNav: false, 
     directionNav: false, 
     slideshowSpeed: 5000, 
     controlsContainer: ".flexslider-container", 
    }); 

}); // End on window load 

Кладка спусков в nwmasonry_init.js:

jQuery(document).on('ready', function() { 
    var $ = jQuery; 

    //Masonry 
    var container = document.querySelector('.overzicht'); 
    var msnry = new Masonry(container, { 
     itemSelector: '.bedrijven', 
     gutter: '.gutter-sizer', 
     transitionDuration: 0, 
    }); 
    }); 

На начальном PageLoad, как можно увидеть здесь http://nieuws.ditisonzewijk.nl/category/brandevoort/ ползунок на вершине в середине перекрывается с другим блоком контента.

Как только вы измените размер окна, ползунок изменит его ширину и, следовательно, высоту ползунка будет исправлено.

У кого-нибудь есть идея о том, как получить высоту слайдера прямо на начальной нагрузке?

Answer 1

Вам необходимо использовать imagesloaded.js. Перекрытие происходит при каменной кладке перед загрузкой всех изображений. Загрузите скрипт с изображениями и воспользуйтесь этим кодом:

jQuery(document).on('ready', function() { 
var $ = jQuery; 

//Masonry 
var container = document.querySelector('.overzicht'); 
imagesLoaded(container, function() { 
var msnry = new Masonry(container, { 
    itemSelector: '.bedrijven', 
    gutter: '.gutter-sizer', 
    transitionDuration: 0, 
}); 
}); 
}); 

Answer 2

Я нашел исправление для этого, хотя это не очень. Я положил задержку на инициализацию кладки.

function loadMasonry() {  
***fire masonry***  
}   
setTimeout(loadMasonry, 500); 

Теперь он работает правильно. Кто-нибудь знает, как исправить это правильно?