带有图像的 jQuery 同位素

Question

我正在为个人图片库使用 jQuery Isotope 库。我已经按照说明进行操作，甚至使用了示例代码，但是我遇到了一个问题，即当页面加载时，它会直接向下加载所有图像。然后几秒钟后，石匠将它们固定到位。

我也在使用 imagesLoaded 库，但我想知道是否有办法将它们加载到位，或者在加载时隐藏它们，或者其他什么？当他们以一条长长的直线加载时，它看起来很草率，然后在几秒钟后泥瓦匠就位。

我认为 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

在查看之前，请注意图片将存储在您的缓存中。因此，该演示可能仅在您第一次查看时才有效。我在那里放了多张原本相当大的图像，然后缩小了它们的尺寸。通常这会增加加载时间（我们想要用于演示），以便您可以看到它确实有效:)

希望对你有所帮助！

祝你好运！