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
    });
});

Answer 2

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

但是有一个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
        });
});

砌体隐藏图像直到满载

2 个答案: