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

Anil · Answer 1 · 2016-12-13T14:37:51.650

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

An issue worth noting - `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). — DACrosby, Feb 20 '14 at 21:48

score 5 · Answer 2 · answered May 31 '14 at 09:56

5

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

answered May 31 '14 at 09:56

Milan Pandya

71
1
1

that was really really helpful. Thank you – Abdul Saleem Jan 03 '21 at 07:48

score 5 · Answer 3 · answered Sep 12 '15 at 07:22

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

score 2 · Answer 4 · answered Jan 04 '13 at 18:53

2

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

answered Jan 04 '13 at 18:53

mkoryak

54,015
59
193
252

Thanks thats great! Thanks so much for your response, really appreciate it. – Keith Mason Jan 04 '13 at 18:57

score 1 · Answer 5 · answered Aug 20 '19 at 21:32

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

score 0 · Answer 6 · answered Mar 24 '18 at 10:38

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

score 0 · Answer 7 · answered Mar 10 '20 at 09:30

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

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

7 Answers7

Linked