最初の読み込みでjQuery同位体が機能しない、すべてのリソース/イメージが読み込まれるまでどのように待つのですか？私はここでjQueryの同位体を使用して一緒に入れている何かを持っている

Question

... http://jsbin.com/eziqeq/6/edit

一般的ではなく、最初の負荷で動作しているようです

は、新しいタブで、同位体のプラグインは、ラッパー要素の高さを設定することですページをリフレッシュすると機能し、内部にある項目に基づいて親要素の高さを設定します。

ご協力いただければ幸いです。私はなぜこの最初の負荷が動作していないのか、後で再ロードするのかと思うことはできません..それはおそらく負荷のある画像をキャッシュすることと関係がありますか？

EDIT--

私はキャッシュをクリアして、再度、リフレッシュされるまで、それは動作しませんページを更新するとき、それはFirefoxの上や作業タブ上で動作として、これはWebkitのブラウザでのキャッシングの問題です。

Answer 1

クロムにimagesLoadedプラグインを使用する必要があります。同位体を初期化する前にすべての画像がロードされるまで待ちます

Answer 2

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 ready"は、DOMの準備ができたら（つまりマークアップ）起動します。

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

"Window load"はすべてのリソースを待機してから起動します。

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

注：（@DACrosby別）：荷重（）画像はつまり、彼らは現在のサイトからロードされていない（キャッシュされている場合は常に発生しません - あなたが使用していますあなたのローカルコピー）。

Answer 3

注：
1.youまた、あなたがフッターに関数を呼び出すことができます（それがロードされるリソースを待っています）windwoロードイベント内でISO-トップ関数を呼び出す必要があります。

2.css loadの後にその関数呼び出しを確認します。

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

も、この問題を解決するための別のオプションがあります最初
http://www.createjs.com/#!/PreloadJS

Answer 4

をロードするイメージの画像プリローダーのプラグインを使用することができます。 grid-itemにimageが含まれている場合は、別のjsを使用する必要があります。あなたがISOTOPの公式サイトから完全かつ明確な詳細情報を取得することができます

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

：JSリンクの下の下に、このプレースホルダJSを呼び出すその後

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

です。 link