javascript - 砌体隐藏图像直到完全加载

Question

我试图隐藏我的砌体图像，直到页面完成加载，因为当前图像在屏幕左侧的长条中加载，然后再组织它们自己。

我似乎无法让容器先隐藏，然后在加载其他所有内容后显示。

这是链接:http://inspiredworx-labs.com/sites/blg/

这是我的代码片段(带有我试图为隐藏/显示位实现的注释掉的代码):

        <script>
    $(window).load( function(){   
            var $container = $('#masonry-container');
            // initialize
            $container.masonry({
              //columnWidth: 60,
              gutter: 6,
              itemSelector: '.masonry-item'
            });
    })

    /*
            $('#masonry-container').hide();
            $container.imagesLoaded(function(){
                $('#masonry-container').show();
            })          
    */
    </script>

Answer 1

您应该像这样在图像 imagesLoaded 中包含您的 Masonry 实例:

var $container = $('#masonry-container');
$container.imagesLoaded(function(){
    $container.masonry({
         itemSelector: '.masonry-item',
         gutter: 6
    });
});