1

我对应该是一个相当明显的问题感到困惑。

Webfont Loader 文档声明将其放置为“ <head>HTML 文档中的第一个元素”。它还包括活动/非活动回调选项，当字体加载或加载失败/超时时调用。

问题是，如果我将回调函数放在紧跟在 之后的脚本块中，那么回调函数当时是未定义的。

我的代码如下：

<head>
  <script type="text/javascript">
    WebFontConfig = {
      google: { families: [ 'Playball::latin' ] },
      active: doActive(),
      inactive: doInactive()
    };
    (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>

  // ... other code ...

  <script>
    function doActive() {
        // ...
    }
    function doInactive() {
        // ...
    }
  </script>
</head>

这只是默认的 Google 代码，加上两个回调。

我看到的唯一明显的选择是在定义其他函数之后包含 webfont 加载器，但这并不优雅。我知道有更好的解决方案，但我的 Google-fu 没有找到它。

4

2 回答 2

4

你的错是直接执行回调。

 WebFontConfig = {
  google: { families: [ 'Playball::latin' ] },
  active: doActive(), // () executes directly
  inactive: doInactive()
};

而不是这个，你应该尝试：

 WebFontConfig = {
  google: { families: [ 'Playball::latin' ] },
  active: doActive, // Only the function. The library will execute the function 
  inactive: doInactive
};

如果库执行您的回调，该函数应该可用

于 2018-02-07T16:28:33.153 回答
2

如果其他人正在寻找答案，我敢肯定，这不是最优雅（或正确）的方法，但这是可行的。

  <script>
    var fontsLoaded = false;
    WebFontConfig = {
      google: { families: [ 'Playball::latin' ] },
      active: function() { fontsLoaded = true },
      inactive: function() { fontsLoaded = -1 }
    };
    (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>

// ... other stuff ...

  <script>
    var MAX_WAIT = 15000; var startTime = Date.now(); var tx;
    checkLoaded();
    function checkLoaded() {
      clearTimeout(tx);
      if (fontsLoaded === -1) { doInactive(); }
      else if (fontsLoaded) { doActive(); }
      else {
        if (Date.now()-startTime > MAX_WAIT) { doInactive(); }
        else { tx = setTimeout(checkLoaded,100); }
      }
    }
  </script>
于 2013-12-11T18:33:02.193 回答