No se puede hacer que Isotope JS funcione con los valores de alto y ancho de cada imagen

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


        });     

preguntado el 27 de agosto de 11 a las 18:08

2 Respuestas

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 Me gusta esto:

$(document).ready(handler)

en lugar de

$(window).load(handler)

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

respondido 20 mar '12, 15:03

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 Necesita ayuda para revertir una función; revirtiendo una expansión animada de un 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.

contestado el 23 de mayo de 17 a las 15:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.