jQuery isotope on first load doesn't work, How

Question

I've got something I've put together using jQuery isotope here.. http://jsbin.com/eziqeq/6/edit

It seems to work in general but on first load, of a new tab, the Isotope plugin is setting the height of the wrapper element to 0. If I refresh the page it does work and sets the height of the parent element based on the the items found inside.

Any help would be greatly appreciated. I can't think why off this first load this isn't working and on subsequent reloads it is.. unless its perhaps something to do with caching the images it loads?

EDIT--

This is a caching issue in Webkit browsers as it works on Firefox and on a working tab when I clear the cache and refresh the page it won't work until refreshed again.

Answer 1

There is another option to solve this issue. You have to use another one js if your grid-item contain any image. below the js link is

<script src='http://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script>

Then call this placeholder js below:

/*=============Code for Masonry Gallery ==============*/
    var grid = document.querySelector('.grid');
    var jQuerygrid = jQuery('.grid').isotope({
        itemSelector: '.element-item'
    }); 
    var iso = jQuerygrid.data('isotope');
    jQuerygrid.isotope( 'reveal', iso.items );

    imagesLoaded(grid, function(){
        iso.layout();
    });

You can get full and clear details from isotop's official website. link

Answer 2

Quick pure JavaScript example to check if all imagery has loaded before initialising the isotope library.

jQuery(document).ready(function($){
    var imgs = document.images,
        len = imgs.length,
        counter = 0;

    [].forEach.call( imgs, function( img ) {
        if(img.complete)
          incrementCounter();
        else
          img.addEventListener( 'load', incrementCounter, false );
    } );

    function incrementCounter() {
        counter++;
        if ( counter === len ) {
            // All images loaded, go ahead.
            var $grid = $('.grid').isotope();
        }
    }
});

Answer 3

$('window').imagesLoaded( function() {

// filter items on button click
$('.portfolio-btn-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});


// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use element for option
    columnWidth: '.grid-item'
  }
})
});

Answer 4

You need to use the imagesLoaded plugin in chrome. Wait until all images are loaded before initializing isotope

Answer 5

A much better way to fix this is to provide width and height to the isotope item and/or the images itself. With the widnow load method you'll end up waiting a few seconds before isotope kicks in and the layout will change which is weird.

Here's what i use in a WordPress theme inside a post loop:

<?php
//....
if ( get_post_gallery() ) {

        $gallery        = get_post_gallery( get_the_ID(), false );
        $galleryIDS     = $gallery['ids'];
        $pieces         = explode(",", $galleryIDS);

        foreach ($pieces as $key => $value ) {
            $image_medium   = wp_get_attachment_image_src( $value, 'medium');
            $image_full     = wp_get_attachment_image_src( $value, 'full'); 

            $w = $image_medium[1]; //Image Width
            $h = $image_medium[2]; //Image Height

?>

        <div class="iso-item" style="width:<?php echo $w; ?>px; height:<?php echo $h; ?>px">
                <a href="<?php echo $image_full ?>"   rel="lightbox">
                    <img width="<?php echo $w; ?>" height="<?php echo $h; ?>" src="<?php echo $image_medium ?>"/>
                </a>
        </div>
<?php 
        }
}
?>

Answer 6

You could use a plugin as suggested by mkoryak.

or you could use the following: (no plugin required - jQuery only):

// jQuery - Wait until images (and other resources) are loaded
$(window).load(function(){
    // All images, css style sheets and external resources are loaded!
    alert('All resources have loaded');
});

Using the above method, you can also be sure that all the CSS stylesheets are loaded as well (to make sure your page is displayed properly when isotope kicks in).

"DOM ready" fires when the DOM is ready (ie the markup).

$(document).ready( function(){ ... });

"Window load" waits for all the resources and then fires.

$(window).load( function(){ ... });

Note: (by @DACrosby): load() won't always fire if the images are cached (ie, they're not presently being loaded from the site - you're using your local copy).