Правильное использование активных / неактивных обратных вызовов Web Font Loader

У меня проблемы с тем, что должно быть довольно очевидным вопросом.

В документации по 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 по умолчанию плюс два обратных вызова.

Единственный очевидный вариант, который я вижу, - включить загрузчик веб-шрифтов после определения других функций, но это не элегантно. Я знаю, что есть лучшее решение, но мой Google-фу не находит его.

Источник

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

Если библиотека выполняет ваши обратные вызовы, функция должна быть доступна

Источник

Если кто-то ищет ответ, я уверен, что это не самый элегантный (или правильный) метод, но он работает.

  <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>
Источник
Другие вопросы по тегам