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

Masonry Hide Images until fully loaded

本文关键字：加载 隐藏 图像      更新时间：2023-09-26

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

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

这是链接：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>
您应该

在图像中包含您的砌体实例imagesLoaded如下所示：

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

我没有得到你尝试过的任何内容。

但是有一个"imagesLoaded"的javascript库。这将帮助你我是这样做的

//  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
        });
});
相关文章：