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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了正确使用Web Font Loader活动/非活动回调相关的知识,希望对你有一定的参考价值。

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

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

答案

你的错是直接执行回调。

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

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

另一答案

如果其他人正在寻找答案,这不是最优雅(或正确)的方法,我敢肯定,但这是有效的。

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

以上是关于正确使用Web Font Loader活动/非活动回调的主要内容,如果未能解决你的问题,请参考以下文章

html 配置使用Web Font Loader异步加载Google字体:https://github.com/typekit/webfontloader

html 配置使用Web Font Loader异步加载Google字体:https://github.com/typekit/webfontloader

在 TableViewController 上添加图像直到搜索栏处于非活动状态

GCM 使用 content_available 向 iOS 推送通知(无法从非活动状态调用)

AEM 6.0 Web 控制台捆绑包(OSGi 捆绑包)中安装的包未正确安装(状态应为活动未安装)

保持数据库连接始终处于活动状态的正确方法