Flexslider 和 Masonry - imagesLoaded 问题答案

【问题标题】：Flexslider and Masonry - imagesLoaded issueFlexslider 和 Masonry - imagesLoaded 问题
【发布时间】：2014-12-06 03:31:59
【问题描述】：

我正在尝试在 Masonry jQuery 布局中包含一个 FlexSlider 库。但是，我无法识别 FlexSlider 的正确高度。我知道我显然对 imagesLoaded 脚本做错了。

我已经正确链接了 imagesLoaded，并且几乎尝试了所有加载顺序的组合。

如何让 FlexSlider 和 Masonry 协同工作？提前致谢！

现在，我在文档就绪函数中加载了以下脚本：

var $container = $('#masonry'); 

        $container.imagesLoaded( function() {
            $container.masonry({
                itemSelector: '.item',
                gutter: 25
            });
        });

    $('.multiSlide').flexslider( {
            slideshow : true,
            animation : 'slide',
            pauseOnHover: true,
            animationSpeed : 400,
            smoothHeight : true,
            directionNav: true,
            controlNav: false,
            prevText : '<span class="fa fa-caret-left"></span>',
            nextText : '<span class="fa fa-caret-right"></span>'
    });

【问题讨论】：

我无法在 jsfiddle 中复制效果。这是我正在测试的网站：chadsherman.com/wp Safari 中出现了问题 - 但 Chrome 中没有
不，我的意思是在 Safari 中我有一个重叠的问题。这是截图：i.imgur.com/FYba6Ly.png 编辑...你删除了你的评论 :-(
好的。检查一下。我还在 firebug 控制台中看到了一个错误，可能是因为它无法正常运行 TypeError: $container.layout is not a function。
我修复了萤火虫错误。这是解决问题的不同尝试的残余。

标签： jquery flexslider masonry

【解决方案1】：

这不是一个很好的解决方法，但我使用 setTimeout() 解决了同样的问题，因此 Flexslider 首先触发：

var $container = $('#masonry'); 

function loadMasonry(){
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector: '.item',
            gutter: 25
        });
    });
}

setTimeout(loadMasonry, 500);

$('.multiSlide').flexslider( {
    slideshow : true,
    animation : 'slide',
    pauseOnHover: true,
    animationSpeed : 400,
    smoothHeight : true,
    directionNav: true,
    controlNav: false,
    prevText : '<span class="fa fa-caret-left"></span>',
    nextText : '<span class="fa fa-caret-right"></span>'
});

我知道必须有更好的方法来做到这一点，但它似乎可以解决问题，直到我弄清楚更好的方法可能是什么：P

【讨论】：