4

この下に何かリストされているかどうかを検索して確認しようとしましたが、何も表示されませんでした。Isotope を使用してレイアウトされたギャラリーがあり、正常に動作しますが、ページの読み込み中にギャラリーの画像がページの中央に表示され、読み込まれるとそれぞれの位置にジャンプします。

画像がスポットになるまでコンテナを非表示に設定し、$container.fadeIn(1000); でフェードインする方法を見つけようとしています。

それらがロードされた後にその関数をトリガーする方法がわかりません。Document.ready をいくつかの場所で使用してみましたが、正しく反応しないようです。

<script>
$(function(){

  var $container = $('#container');

  $container.imagesLoaded( function(){
    $container.isotope({
        layoutMode : 'fitRows',
        itemSelector : '.photo'
    }); 

  });

$container.fadeIn(1000);

});

この種の機能は機能しますが、イメージがまだ完全にロードされていることを実際にはリッスンしていません。

4

1 に答える 1

10

プラグインの作者が GitHub で説明しています。それは実際には非常に簡単です。fadeIn同位体ギャラリーを開始する前に権利を追加するだけです。

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.fadeIn(1000).isotope({
    layoutMode : 'fitRows',
    itemSelector : '.photo'
  });
});
于 2013-03-26T07:38:56.710 に答える