只有頁面更改大小后，gridify.js才會布局

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

您的問題歸結於您在做事的時間（而不是在做的事情）。 因此，您要實現以下目標：

1. 向Facebook發起ajax調用以獲取一些圖像
2. 將來自Facebook的新標記添加到您的DOM
3. 調用gridify函數以安排添加到頁面的標記

.ready()事件在HTML文檔加載后發生，在這里您正在執行（1）和（2）。 頁面上的所有內容（包括圖像等）下載完成后，就會發生onload事件，您就在這里進行（3）。 所以，聽起來還不錯...

不過重要的是， onload事件不會一直等到您對Facebook的異步調用完成-它對此一無所知，它只會在頁面上已經存在的標記中徘徊。 這意味着您正在啟動一個異步調用，然后在完成之前立即跳到（3）。 您的gridify函數正在被調用， 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)); } }); }); 

我尚未對此進行測試，但希望至少可以為您指明正確的方向。