4

Masonry and Embedlyプラグインを使用して埋め込みコンテンツを表示しています。ここに、例をまとめました。

私のjQueryは次のとおりです

//embedly

    $('.box').find('a').embedly({
      maxWidth: 260,
      wmode: 'transparent',
      method: 'after',
      chars: 50,
      width: 260,
      key:':cd54253e69944ae18ad5ece38b4d0e1e' //temporal
    });


//masonry

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

    $container.imagesLoaded( function(){
        $container.masonry({
          itemSelector: '.box',
          isAnimated: true,
          isFitWidth: true
      });
    });

Masonryプラグインが最初に読み込まれ、重複の問題が発生するようです（結果ウィンドウのサイズを変更した場合にのみ正しく表示されます）埋め込みでコンテンツのレンダリングが完了したら、コールバック関数または再トリガーMasonryを使用できることを読みましたが、そうではありませんそれを行う方法を知っています。手伝って頂けますか？これを修正する他の解決策はありますか？

4

2 に答える 2

2

非同期のタイミングの問題があります。組積造のレイアウトコードは、コンテンツが読み込まれる前に実行されます。

したがって、すべてのコンテンツがロードされるまで、石積みを呼び出すのを待つ必要があります。タイムアウトを使用したくなるかもしれません。これは競合状態を引き起こす傾向があります。

理想的には、embedlyはより優れたAPIを持ち、ajax呼び出しと同じようにある種の遅延promiseオブジェクトを返します。残念ながら、きれいなものは何もないようですので、いくつかの逆立ちをしなければなりません。

成功：コールバックを定義する場合は、明らかにコンテンツを自分で挿入する必要があります。

幸い、embedly（）は、コンテンツがロードされて表示された後、コールバックをバインドできる独自のイベントを発生させます。

これを実現するためのより洗練された方法はおそらくたくさんありますが、醜いグローバルを使用した簡単な例のために、ロードされたコンテンツの数を追跡します。埋め込みイベントが発生してコンテンツの一部が読み込まれたことを示すたびに、カウンターをインクリメントします。一致した要素の総数に達すると、すべてのコンテンツが読み込まれたことがわかり、石積みと呼ばれます。

きれいではありませんが、機能します：http: //jsfiddle.net/sJ5vc/

    //embedly
var matches = $('.box').find('a').length;
var loaded = 0;

// we call this from the embedly callback after all 
// content has been loaded.
function callMasonry() {
    var $container = $('#main-container');

    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.box',
            isAnimated: true,
            isFitWidth: true
        });
    });
}


var result = $('.box').find('a').embedly({
    maxWidth: 260,
    wmode: 'transparent',
    method: 'after',
    chars: 50,
    width: 260,
    key: ':cd54253e69944ae18ad5ece38b4d0e1e' //temporal
}).bind('embedly-oembed', function(e, oembed) {

    // not as elegant as I would like but increment
    // the counter. Once we have gotten to 
    // the number of matches call masonry
    //
    // It would be much cleaner if embedly could return some kind
    // of deferred object that gets resolved after all matched
    // content has been loaded. 

    loaded++;

    console.log("loaded " + oembed.title);

    if (loaded == matches) {
        callMasonry();
    }


});;
于 2012-11-05T02:32:49.440 に答える
0

次のように、embedly（with class="box"）によって更新されているdivのJQueryロード関数を使用して石積みコードをラップできます。

//masonry
 $('.box').load(function(){
       var $container =  $('#main-container');

        $container.imagesLoaded( function(){
            $container.masonry({
              itemSelector: '.box',
              isAnimated: true,
              isFitWidth: true
          });
        });
​ });​
于 2012-10-29T23:07:42.427 に答える