13

ここでjQueryアイソトープを使用してまとめたものがあります.. http://jsbin.com/eziqeq/6/edit

一般的には機能しているようですが、新しいタブの最初の読み込み時に、Isotope プラグインがラッパー要素の高さを 0 に設定しています。ページを更新すると機能し、親要素の高さをに基づいて設定します。内部で見つかったアイテム。

どんな助けでも大歓迎です。この最初のロードでこれが機能せず、その後のリロードで機能しない理由がわかりません..おそらく、ロードした画像のキャッシュに関係していない限り?

編集 -

これは Webkit ブラウザーのキャッシュの問題です。キャッシュをクリアしてページを更新すると、Firefox と作業中のタブで機能し、再度更新するまで機能しません。

4

7 に答える 7

15

で提案されているプラ​​グインを使用できます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(){ ... });

注: (by @DACrosby): 画像がキャッシュされている場合、load() は常に起動するとは限りません (つまり、現在サイトから読み込まれていない - ローカル コピーを使用している)。

于 2013-01-04T19:15:27.900 に答える
6

この問題を解決する別のオプションがあります。grid-item含まれている場合は、別の js を使用する必要があります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 の公式 Web サイトを参照してください。リンク

于 2015-09-12T07:22:28.357 に答える
2

chromeでimagesLoadedプラグインを使用する必要があります。同位体を初期化する前に、すべての画像が読み込まれるまで待ちます

于 2013-01-04T18:53:51.643 に答える