Question

我的页面上有一个脚本，使用优秀的jQuery Masonry插件将一堆盒子重新排列成像马赛克一样的pinterest。我从页面底部（就在前面）调用了这样的盒子布局渲染方法：

<script type="text/javascript">
  $(function() {
    wall.drawBoxes();
  });
</script>

我也使用这样的谷歌网络字体，就在标记之后：

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

问题是在加载字体之前渲染框。当字体加载时，框的大小会增加，使得渲染的马赛克布局看起来像垃圾。

我该怎么做才能防止这种情况？

Answer 1

你可以添加loading回调 - 当所有字体加载完毕后它会触发。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    loading: function() {wall.drawBoxes()}
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

});

Answer 2

我添加了fontactive回调，然后触发了字体加载完毕。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    fontactive: function(fontFamily, fontDescription) { wall.drawBoxes() }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

});

Answer 3

您可以在绘图框调用之前移动Web字体调用以首先加载字体。

我建议将你的功能转移到domready函数中。 e.g。

你也可以在<head>中加入字体，以便在加载DOM之前加载字体。

你能加载谷歌样式表吗？ <link href="http://fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" >

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

  $(function() {
    wall.drawBoxes();
  });

});

Answer 4

您可以添加active回调 - 当所有字体都已呈现时会触发。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    active: function() {wall.drawBoxes()}
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 

});

有关可用事件的参考，请参阅webfontloader readme。

Answer 5

使用css更简单：

@import url(http://fonts.googleapis.com/css?family=....);

渲染布局后加载Google Web Fonts

5 个答案: