3

我在我正在开发的网站上使用 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'
            });
        });
    });

由于我使用的是直接交叉布局，因此跳转非常不和谐。任何帮助，将不胜感激。

编辑添加了开发链接：

http://66.214.147.58/tracey_dev/

编辑 2

我已经制作了这个问题的视频。

http://vimeo.com/50708647

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

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

我希望在同位素脚本启动之前不显示图像。

编辑 3

好的，我想我了解 imagesLoaded 的作用。它不会预加载图像并在完成之前隐藏它们，然后触发 Isotope，这就是我对它的印象。我为解决我的问题所做的是在准备好的文档上添加 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>

谢谢你。

4

0 回答 0