CODEWITHSUNDEEP
imageloadingjquery-isotopedelay
user915741
user915741

Reputation:

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');
                $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');
            }


        });

Upvotes: 0

Views: 2491

Answers (2)

Michael Prins
Michael Prins

Reputation: 123

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.

Upvotes: 1

Systembolaget
Systembolaget

Reputation: 48

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.

Upvotes: 0

Related Questions