Инстафид и масонство

У меня есть этот код ниже, где я пытаюсь использовать Instafeed и Masonry вместе. Все работает нормально, пока я не нажму кнопку «Загрузить еще». Затем макет масонства ломается. Вероятно, это потому, что что-то загружается раньше другого или наоборот. Я новичок в этом, поэтому вся помощь будет принята с благодарностью.

Мне посоветовали использовать imagesLoaded вместо window.load, а также использовать добавленный метод. Но я не понимаю, как включить это в мой код.

Мой код находится в документе script.js и выводится в нижнем колонтитуле страницы после instafeed.js и каменной кладки.

$(function () {
    var loadButton = document.getElementById('load-more');

    if(loadButton !== null) {
        var userFeed = new Instafeed({
          get: 'user',
          userId: xxxxxxxxx,
          accessToken: 'xxxxxxxxx',

          limit: 6,
          resolution: 'standard_resolution',
          template: '<div class="col30 grid image-top-fill instapic"><a href="{{link}}" title="Besök Instagram" class="" id="{{id}}"><img src="{{image}}" alt="Instagram" /></a> <p class="nomargin">{{caption}}</p></div>',
        after: function() {
            if (!this.hasNext()) {
                loadButton.setAttribute('disabled', 'disabled');
                Masonry.start();
            }
        }
    });

    loadButton.addEventListener('click', function() {
        userFeed.next();
    });
    userFeed.run();
}
});

$(window).load(function(){
    var container = document.querySelector('#instafeed');

    var msnry = new Masonry( container, {
      itemSelector : '.instapic',
      isAnimated : true,
      isFitWidth : false
    });

});

Заранее спасибо за помощь! Дайте мне знать, если вам нужно от меня что-то еще.

Привет / Джеппе


person Jesper Blomgren    schedule 14.07.2014    source источник


Ответы (1)


Вы правы в том, что Masonry пытается работать с элементами до их загрузки. Вы можете поместить .masonry('appended', $items) в событие after Instafeed. Разработчик Instafeed опубликовал это исправление:

https://github.com/stevenschobert/instafeed.js/issues/118#issuecomment-44438003

person starscream_disco_party    schedule 14.08.2014