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函数来排列添加到页面的标记

该.ready()事件在 HTML 文档加载后发生，您正在执行 (1) 和 (2)。一旦页面上的所有内容（包括图像等）完成下载，该onload事件就会发生，并且您正在执行此操作 (3)。所以，听起来不错……

但重要的是，该onload事件不会等到您对 Facebook 的异步调用完成 - 它不知道这一点，它只会等待页面上已经存在的标记。这意味着您正在启动一个异步调用，然后在完成之前立即跳转到 (3)。您的gridify函数正在被调用，但还没有任何东西可以使用。

您可能会对这种安排感到幸运（有时它可能会奏效），但您发现它不是很健壮。为确保 (1)、(2)、(3) 按顺序运行，只需稍微调整代码的顺序，将gridify函数放入来自 Facebook 的回调中：

$(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 回答