Question

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开头。

Answer 1

你的问题取决于你做什么（不是你在做什么）。所以，你想实现这个目标：

对Facebook进行ajax调用以获取一些图像
将新标记从Facebook附加到您的DOM
调用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));
    }
  });
});

我无法对此进行测试，但希望至少能指出正确的方向。

gridify.js仅在页面更改大小后布局

1 个答案: