1

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

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

这是链接：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>
4

2 回答 2

2

您应该在图像中包含 Masonry 实例，imagesLoaded如下所示：

var $container = $('#masonry-container');
$container.imagesLoaded(function(){
    $container.masonry({
         itemSelector: '.masonry-item',
         gutter: 6
    });
});
于 2013-11-14T11:57:42.160 回答
0

我没有得到你尝试过的任何东西。

但是有一个 JavaScript 库是“ imagesLoaded ”。这会帮助你我是这样做的

//  created a array with image and data
 var elemar  = [];
$.each(data, function(j,subData){

    var img = document.createElement('img');
    img.src = 'images.jpg';
    item.appendChild( img );                        
    elemar.push(item);
});

// loading div after image loaded
imagesLoaded(elemar).on( 'progress', function( imgLoad, image ) {
        var item = image.img.parentNode;        
        container.appendChild( item );// container is an javascript , $('#containerdiv'), where all div will be publish
        msnry.appended( item ); // msnry intializaion
        });
});
于 2013-11-14T12:00:10.007 回答