jQuery砌体不适用于Google字体 [英] Jquery Masonry not working with Google Fonts

问题描述

我发现Masonry中的重叠问题是由Masonry脚本加载后加载Google字体引起的.我添加了以下代码来解决此问题，但现在Masonry无法正常工作.实际上，看起来砌筑正在工作片刻，然后突然停止工作.

I have an issue with overlapping in Masonry that I've discovered is caused by Google Fonts loading after the Masonry script. I've added the following code to fix this, but now Masonry doesn't work. Actually, it looks like Masonry is working for a split second and then suddenly stops working.

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

推荐答案

看起来像Google WebFontLoader事件仅在字体异步加载时起作用.我应该更仔细地阅读文档.这就是我正常运行的代码最终看起来的样子……

Looks like the Google WebFontLoader events only work if the fonts are loaded asynchronously. I should have read the documentation more closely. Here's how my functioning code ended up looking...

$(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);
  })();
});

这篇关于jQuery砌体不适用于Google字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！