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 элемент начинается как пустые дела.

Answer 1

Ваша проблема в том, что вы делаете что-то (не то, что вы делаете). Итак, вы хотите, чтобы достичь этого:

1. Сделать АЯКС вызов Facebook, чтобы захватить некоторые изображения
2. Append новую разметку от 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)); 
 
    } 
 
    }); 
 
});

I не смогли проверить это, но, надеюсь, это по крайней мере указывает вам в правильном направлении.