Question

我在我正在处理的网站上使用Isotope JS。我正在使用StraightAcross布局选项。问题是所有图像都开始加载，然后Isotope开始创建布局。我正在关注文档，我已经实现了两种方法：

http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin

我的代码：

 var $container = $('#container');
    $container.imagesLoaded(function(){
        $('#container').isotope({ 
        layoutMode : 'straightAcross'
        });
    });

我也尝试过：

$(window).load(function() {
            $('#container').isotope({ 
            layoutMode : 'straightAcross'
    });

和

$(window).load(function() {
     var $container = $('#container');
        $container.imagesLoaded(function(){
            $('#container').isotope({ 
            layoutMode : 'straightAcross'
            });
        });
    });

由于我使用的是直线布局，所以跳跃非常刺耳。任何帮助将不胜感激。

EDIT 添加了开发链接：

http://66.214.147.58/tracey_dev/

编辑2

我制作了一个关于这个问题的视频。

http://vimeo.com/50708647

开始时，大于容器的图像开始将堆叠的图像叠加在一起。一旦它们加载，Isotope就会启动并创建布局，将图像大小调整到容器并将它们水平排列。

由于此网站可以调整大小，因此图像以更大的格式保存以保持质量。我更新了图像以从服务器加载大图像。

我想在Isotope脚本开始播放之前不要显示图像。

编辑3

好的，我想我明白了imagesLoaded的作用。它不会预加载图像并隐藏它们直到它完成，然后触发同位素，这就是我的印象。我为解决我的问题所做的是在文档就绪上添加hide（）然后在window.load上添加show（）。这并没有解决我的文件大小和加载问题（在我继续时解决这个问题），但它解决了我的跳转问题。再次感谢您的输入。这是我的代码有效。

<!-- Hides the container for loading -->
<script>
    $(document).ready(function() {
            $('#container').hide();
});
</script>

<!-- Isotope Script -->
<script>

$(window).load(function() {
    // set panels equal to window size
    setSectionSize();

    $(window).resize(function(){
        setSectionSize();
    });

     // function to set panels to window size
    function setSectionSize(){
        var windowHeight = $(window).height()-170;

        //resize section containing image
        $('#container').css({'height':windowHeight+'px'});         
        };

        /* Load Isotope */
        var $container = $('#container');

        $container.imagesLoaded(function(){
        $container.show();
        $container.isotope({ 
        layoutMode : 'straightAcross'

        });
         });
                 });
</script>

谢谢。

同位素：imagesLoaded无法正常工作

0 个答案: