jQuery isotope on first load doesn't work, How do I wait for all resources/images to be loaded?

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 Is

Answer 1

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

Answer 2

Note:
1.you should call iso-top function inside windwo load event (it will wait for resources to be loaded) also you can call function in footer.

2.confirm that function call after css load.

$(window).load(function(){
     $('.iso').isotope({
     // options
     itemSelector: '.item',
     layoutMode: 'masonry'
    });
   });

also can use image preloader plugin for images loading first
http://www.createjs.com/#!/PreloadJS

Answer 3

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 4

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).

Answer 5

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 6

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 
        }
}
?>