1

gridifyでこの問題が発生しました-ページをズームインまたはズームアウトした後にのみ画像がレイアウトされます。これは、どのサンプル ページでも発生しません。

これは私のコードです：

$(document).ready(function(){
    var albumId = "xxxxxxxxxxxxx";
    $.ajax({
        dataType:"json",
        url:'http://graph.facebook.com/' + albumId + '?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371',
        success:function(incomming){
            var photos = incomming.photos.data;
            for (var key in photos){
                $("#photos").append("<img src='" + photos[key].source + "' class='image'>");
            }
        },
        error:function(err){
            console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
        }
    });
});
$(window).load(function() {
    var options = {
        items:3,
        srcNode: 'img',
        margin: '20px',
        width: '250px',
        resizable: true,
        transition: 'all 0.5s ease'
    }
    $('.grid').gridify(options);
});

私の.grid要素は空のdivとして始まります。

4

1 に答える 1

2

あなたの問題は、あなたが何かをしているときです（あなたがしていることではありません）。したがって、これを達成したい：

  1. Facebook に ajax 呼び出しを行って画像を取得する
  2. Facebook からの新しいマークアップを DOM に追加する
  3. 関数を呼び出してgridify、ページに追加されたマークアップを配置します

イベントは HTML ドキュメントが読み込まれた.ready()後に発生し、ここで (1) と (2) を実行しています。ページ上のすべてのコンテンツ (画像などを含む) のダウンロードが完了すると、onloadイベントが発生します。それで、それは大丈夫ですね...

ただし重要なのは、onloadイベントは Facebook への非同期呼び出しが完了するまで待機しないということです。イベントはそのことを認識せず、ページに既に存在するマークアップのためにハングアップするだけです。これは、非同期呼び出しを開始し、終了する前にすぐに (3) にジャンプすることを意味します。あなたのgridify関数が呼び出されていますが、それが機能するものはまだありません。

この配置で幸運に恵まれるかもしれません (うまくいく場合もあります) が、おわかりのように、それほど堅牢ではありません。(1)、(2)、(3) が順番に実行されるようにするには、コードの順序を少し調整して、gridifyFacebook からのコールバックに関数を入れます。

$(document).ready(function(){
  var albumId = "xxxxxxxxxxxxx";
  var options = {
    items:3,
    srcNode: 'img',
    margin: '20px',
    width: '250px',
    resizable: true,
    transition: 'all 0.5s ease'
  };
  $.ajax({
    dataType:"json",
    url:'http://graph.facebook.com/' + albumId + '?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371',
    success:function(incomming){
      var photos = incomming.photos.data;
      for (var key in photos){
        $("#photos").append("<img src='" + photos[key].source + "' class='image'>");
      }
      $('.grid').gridify(options);
    },
    error:function(err){
      console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
    }
  });
});

これをテストすることはできませんでしたが、うまくいけば、少なくとも正しい方向に向けることができます.

于 2015-03-10T12:11:33.340 に答える