Can't get Isotope JS to work off the the height and width values of each image

I'm using the Isotope JS sort and arrange images and it's working fine apart from when the page loads the script doesn't run until all the images have loaded. On the Isotope JS help page it states providing the high and width values will give the script the information it needs to arrange the items without the images loading. I did this but the script is still only being triggered after all the images have loaded. I'm new to JS coding so I was trying to find what I had missed.

<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');
            开发者_如何学C    $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');
            }


        });     

---

Providing inline height and width is required but your code also runs only once the imagesLoaded plugin fires the load() event.

What you need to do is change your code to be triggered by jQuery's ready() function like this:

$(document).ready(handler)

instead of

$(window).load(handler)

You can see more about the imagesLoaded plugin included in Isotope here.

---

Plugin creator himself writes "This is because Isotope needs to know the exact width of an item before it lays out all the items" here Need help reversing a function; reverting an animated expansion of a div Maybe the images you're using are way too large or too plentiful or both? Had same issue when mistakingly linking to folder with original size images instead of their website equivalents.