3

jQuery Masonry がポジショニング マジックを行ったときにコールバック関数を実行して、コード内のスタイル設定されていないコンテンツのフラッシュを防止しようとしています。

ただし、テストの目的で、まったく呼び出されない単純なアラートを使用しています。

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

$jigsaw.imagesLoaded( function(){
    $jigsaw.masonry({
     columnWidth : 180,
      isAnimated : !Modernizr.csstransitions,
     isResizable : true,
    itemSelector : '.piece'
    }, function(){
        alert('Completed');
    });
});

明らかな何かが欠けているかもしれませんが、助けていただければ幸いです

4

4 に答える 4

14

Masonry は jQuery の遅延オブジェクト システムで動作するようです。jQuery 1.5+ を使用している場合は、次のように動作する可能性があります。

$.when($jigsaw.masonry(options)).then(function(){/*callback function*/});
于 2012-08-08T17:02:45.963 に答える
3

Masonry v2.0でのコールバックは文書化されておらず、完全にはサポートされていません。

しかし、コールバックはIsotope v1.5で素晴らしいです！トランジションまたはアニメーションの終了後にトリガーされる適切なコールバックが必要な場合は、Isotopeが最適です。

その理由は、CSSトランジションまたはjQueryアニメーションを使用しているか、どちらも使用していない可能性があるためです。したがって、どのロジックが使用されているかを検出し、実際のコールバックをいつトリガーするかを検出するために、すべてのロジックを組み込む必要があります。

于 2011-06-06T14:51:44.017 に答える
1 
// Create the callback function
var callback = function($el, cb) {
  var instance = $.data($el, 'masonry');
  if (!instance) {
    setTimeout(callback($el, cb), 300);
  } else {
    cb();
  }
}

// Then simply add this to your imagesLoaded for an element of '.thumbnails' or something
callback('.thumbnails', function() {
  // some code goes here
});
于 2012-06-01T08:11:58.760 に答える
0

私はこれを試してみましたが、うまくいきました

jQuery.when( $jigsaw.masonry('reload') ).done(function(x) { 
    //call back logic 
});
于 2013-05-05T02:51:02.883 に答える