jQuery同位素与图像

Question

我正在使用jQuery Isotope库来创建个人图库。我按照说明操作，甚至使用了示例代码，但是我遇到了一个问题，当页面加载时，它会直接加载所有图像。然后几秒钟后，梅森将它们放到位。

我也在使用imagesLoaded库，但是我想知道是否有办法将它们加载到位，或者在加载时隐藏它们，或者什么？当它们在一条长而直的线上加载时，看起来很邋and，然后在几秒钟之后将泥瓦土加工到位。

我认为imagesLoaded会隐藏图像，或将它们加载到位，但事实并非如此。

我的代码和一些照片来说明我的意思：

// Isotope Settings
    $(function(){

    var $container = $('#mason');
    $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector : '.box',
            masonry : {
                columnWidth: 270
            }
        });
    });

    $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.box',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
        }
    },
    // call Isotope as a callback
        function( newElements ) { 
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $container.isotope( 'appended', $newElems, true ); 
            });
        }

    );
    });

Answer 1

您基本上想要做的是最初隐藏图像，然后只在加载完所有内容后显示它们。这可以通过CSS和jQuery轻松完成。

将所有图像放入包装div

<div id="wrapper">

    //put your images here
    <img src="awesomeImage" class="image" />

</div>

将包装器的初始显示设置为无（CSS）

#wrapper { display:none; }

仅在页面加载完成后显示图像（jQuery）

$(document).ready(function() {
    $("#wrapper").show();
});

这应解决问题。

您可以在此处找到一个有效的示例：jsFiddle

在查看之前，请注意图片将存储在缓存中。因此，演示可能仅在您第一次查看时才起作用。我把多个图像放在那里，这些图像非常大，然后缩小尺寸。通常这会增加加载时间（我们想要进行演示），这样你就可以看到它确实有效：）

我希望这会帮助你！

祝你好运！