无法让Isotope JS计算出每个图像的高度和宽度值

Question

我正在使用Isotope JS排序和排列图像，它工作得很好，除了当页面加载时，脚本直到所有图像都加载后才会运行。在Isotope JS帮助页面上，它声明提供高和宽值将为脚本提供在不加载图像的情况下排列项目所需的信息。我这样做了，但脚本仍然只有在所有图像加载后才被触发。我是JS编码的新手，所以我想找出我错过了什么。

<script src="js/jquery.isotope.min.js"></script> 

    $(window).load(function(){
        $('#container').isotope({
                itemSelector : '.item'
            });
        });

        var $container = $('#container');

        $('.filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });

        $('#options').find('.option-set a').click(function(){
        var $this = $(this);
            // don't proceed if already selected
            if ( !$this.hasClass('selected') ) {
                $this.parents('.option-set').find('.selected').removeClass('selected');
                $this.addClass('selected');
            }


        });     

          $(window).load(function(){             $('#container').isotope({                     itemSelector : '.item'                 });             });              var $container = $('#container');              $('.filters a').click(function(){                 var selector = $(this).attr('data-filter');                 $container.isotope({ filter: selector });                 return false;             });              $('#options').find('.option-set a').click(function(){             var $this = $(this);                 // don't proceed if already selected                 if ( !$this.hasClass('selected') ) {                     $this.parents('.option-set').find('.selected').removeClass('selected');                     $this.addClass('selected');                 }               });         

<script> 


    $(window).load(function(){
        $('#container').isotope({
                itemSelector : '.item'
            });
        });

        var $container = $('#container');

        $('.filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });

        $('#options').find('.option-set a').click(function(){
        var $this = $(this);
            // don't proceed if already selected
            if ( !$this.hasClass('selected') ) {
                $this.parents('.option-set').find('.selected').removeClass('selected');
                $this.addClass('selected');
            }


        });     

​

Answer 1

提供内联的高度和宽度是必需的，但是您的代码也只在imagesLoaded插件触发load()事件时运行。

您需要做的是将您的代码更改为由jQuery's ready() function触发，如下所示：

$(document).ready(handler)

而不是

$(window).load(handler)

您可以查看有关Isotope here中包含的imagesLoaded插件的更多信息。

Answer 2

插件创建者自己写道“这是因为Isotope需要在布局所有项目之前知道项目的确切宽度”这里Need help reversing a function; reverting an animated expansion of a div也许你使用的图像太大或太多，或者两者都有？有同样的问题，当错误地链接到文件夹与原始大小的图像，而不是他们的网站等价物。