2

我的页面上有一个脚本，它使用出色的 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>

问题是这些框是在字体加载之前呈现的。并且当字体加载后，框的大小会增加，使渲染的马赛克布局看起来像废话。

我能做些什么来防止这种情况发生？

4

5 回答 5

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

});
于 2012-06-14T15:55:19.463 回答
2

您可以添加 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);
  })(); 

});
于 2012-06-14T13:07:22.333 回答
1

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

我建议将您的功能移动到 domready 功能中。例如

您还可以在加载 DOM 之前将字体调用放在<head>加载字体中。

你能加载谷歌样式表吗？<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();
  });

});
于 2012-06-13T16:30:35.957 回答
1

您可以添加回调 - 它会在所有字体呈现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 自述文件。

于 2014-04-28T15:26:14.607 回答
-1

使用 css 更简单：

@import url(http://fonts.googleapis.com/css?family=....);
于 2012-06-13T16:31:33.193 回答