Изотопът на jQuery при първо зареждане не работи, как да изчакам всички ресурси/изображения да бъдат заредени?

Можете да използвате плъгин, както е предложено от mkoryak.

или можете да използвате следното: (не е необходим плъгин - само jQuery):

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

Използвайки горния метод, можете също да сте сигурни, че всички CSS таблици със стилове също са заредени (за да сте сигурни, че страницата ви се показва правилно, когато isotope започне).

„DOM готов“ се задейства, когато DOM е готов (т.е. маркирането).

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

„Зареждане на прозорец“ изчаква всички ресурси и след това се задейства.

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

Забележка: (от @DACrosby): load() няма винаги да се задейства, ако изображенията са кеширани (т.е. в момента не се зареждат от сайта - използвате вашето локално копие) .

Забележка:
1.трябва да извикате функцията iso-top в събитието за зареждане на windwo (то ще изчака ресурсите да бъдат заредени), също така можете да извикате функция в долния колонтитул.

2.потвърдете това извикване на функция след зареждане на css.

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

също може да използва плъгин за предварително зареждане на изображения за първо зареждане на изображения
http://www.createjs.com/#!/PreloadJS

Има и друг вариант за решаване на този проблем. Трябва да използвате друг js, ако вашият grid-item съдържа image. под връзката js е

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

След това извикайте този заместител js по-долу:

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

Можете да получите пълни и ясни подробности от официалния уебсайт на isotop. връзка

Трябва да използвате приставката imagesLoaded в chrome. Изчакайте, докато всички изображения се заредят, преди да инициализирате изотоп

Много по-добър начин да поправите това е да предоставите ширина и височина на изотопния елемент и/или на самите изображения. С метода за зареждане на widnow в крайна сметка ще изчакате няколко секунди, преди изотопът да се включи и оформлението ще се промени, което е странно.

Ето какво използвам в тема на WordPress в цикъл на публикуване:

<?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="/bg<?php echo $image_full ?>"   rel="lightbox">
                    <img width="<?php echo $w; ?>" height="<?php echo $h; ?>" src="<?php echo $image_medium ?>"/>
                </a>
        </div>
<?php 
        }
}
?>

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

Бърз чист пример на JavaScript, за да проверите дали всички изображения са заредени, преди да инициализирате изотопната библиотека.

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