Isotope Jquery Plugin Doesn't Show Properly on Chrome

Isotope jquery plugin doesn't show properly on chrome

The problem is probably that Isotope is doing its thing before the images are loaded.

http://isotope.metafizzy.co/demos/images.html

[In this demo] Isotope is triggered after all images are loaded with the imagesLoaded
plugin.

http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin

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

$container.imagesLoaded(function() {
  $container.isotope({
    // options...
  });
});

jQuery Isotope Masonry : animation doesn't initiate until browser is resized (Chrome 27.0.1453.110)

I just took a look at Andrew's site and noticed he had solved the problem by calling

jQuery(window).load(
    function()
    { jQuery
        ('#blog-wrap').isotope
            (
                { itemSelector: 'article', layoutMode : 'masonry' }
            );
    }
);

Of course you'll have to substitute #blog-wrap and article with your own classes and/or element names (and/or element IDs).

I've successfully used this method to solve the same problem with my site too.

Height issue in Chrome with jquery Isotope in responsive layout with Bootstrap 3

Even though I read this post before, the answer could be found here: Can't get Isotope working with Bootstrap 3 .thumbnail

Problem was that when images is not loaded, and since responsive images can't have width/height values set, either Isotope nor my equal height function could correctly set the image height. So solution was simple, just setting Isotope to init on load instead:

$(window).load(function() {
    resizeBoxes();
    initIsotope();
    $('#listing').animate({opacity: 1.0}, 200);
});

I added a fadein to avoid flickering before load had finished.

jQuery plugin reduces image heights to 1px on a refresh in Chrome

lshettyl suggsted that the issue may have been that the plugin was running before the images had loaded, because the DOM was loading quicker on a refresh; this was correct. So, using the using the advice here, I changed $(document).ready to $(window).load, and the plugin works fine.

---

Related Topics