Jquery Masonry не работает с Google Fonts

У меня есть проблема с перекрытием в Masonry, которая, как я обнаружил, вызвана загрузкой шрифтов Google после скрипта Masonry. Я добавил следующий код, чтобы исправить это, но теперь Masonry не работает. На самом деле, похоже, что Masonry работает доли секунды, а затем внезапно перестает работать.

$(document).ready(function () {
  WebFont.load({
    google: {
      families: ['Chivo']
    }
  });
  WebFontConfig = {
    active: function() {
      $('#archive').masonry({
          itemSelector : '.item',
          columnWidth: 350,
          gutterWidth: 20
      });
    }
  };
});

google-webfonts jquery-masonry
person niftygrifty    schedule 28.05.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Похоже, события Google WebFontLoader работают, только если шрифты загружаются асинхронно. Я должен был прочитать документацию более внимательно. Вот как в итоге выглядел мой работающий код...

$(document).ready(function () {

  WebFontConfig = {
    google: {
      families: ['Chivo']
    },
    active: function() {
      $('#archive').imagesLoaded(function(){
        $('#archive').masonry({
            itemSelector : '.item',
            columnWidth: 333,
            gutterWidth: 10
        });
      });
    }
  };

  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1.4.2/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
});
person niftygrifty    schedule 29.05.2013
comment
Я боролся с проблемой перекрытия изображений с помощью Masonry, несмотря на использование imagesLoaded, но потом понял, что высота шрифтов Google сбивает с толку. Это именно то решение, которое мне было нужно. (Конечно, теперь шрифты не будут загружаться, если JS выключен, но я могу с этим смириться.) - person tinymachine; 29.06.2015