Question

我遇到的问题应该是一个相当明显的问题。

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

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

我的代码如下：

<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没有找到它。

Answer 1

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

  <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>

Answer 2

你的错是直接执行回调。

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

如果库执行你的回调，那么该函数应该可用

正确使用Web Font Loader活动/非活动回调

2 个答案: