Вопрос по javascript – медленный / неотзывчивый / застрял сценарий typekit

2

я установил typekit на моем сайте, обычные две строки js сразу после тега заголовка открытия, но он очень медленно / не отвечает на загрузку шрифтов, это полностью исправляется обновлением страницы, после чего шрифт typekit загружается идеально и действительно быстро. Но с точки зрения пользователей они никогда не узнают об этом, поэтому им будут предоставлены шрифты по умолчанию.

У меня есть typekit js как первая вещь под открывающим тегом head перед метатегами и перед загрузкой в jquery, jquery-ui и другие скрипты.

У кого-нибудь еще были проблемы с этим?

Ваш Ответ

1   ответ
1

мне показалось, что мне нужно было загрузить скрипт в асинхронном режиме - как указано в блоге typekit, я скопировал его ниже

Стандартный асинхронный шаблон

Этот первый шаблон является самым основным. Он основан на шаблонах, написанных экспертами по веб-производительности, такими как Стив Соудерс, и используемых в других кодах для встраивания JavaScript, таких как Google Analytics.

<script type="text/javascript">
  TypekitConfig = {
    kitId: 'abc1def'
  };
  (function() {
    var tk = document.createElement('script');
    tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
    tk.type = 'text/javascript';
    tk.async = 'true';
    tk.onload = tk.onreadystatechange = function() {
      var rs = this.readyState;
      if (rs && rs != 'complete' && rs != 'loaded') return;
      try { Typekit.load(TypekitConfig); } catch (e) {}
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
  })();
</script>

В этом шаблоне используется один встроенный тег для динамического добавления нового элемента сценария на страницу, который загружает набор, не блокируя дальнейшую визуализацию. Прилагается прослушиватель событий, который вызывает Typekit.load () после завершения загрузки скрипта. Как это использовать:

Поместите этот фрагмент вверху, чтобы загрузка началась как можно скорее. Отредактируйте выделенный объект TypekitConfig и замените значение по умолчанию своим собственным идентификатором набора. Вы можете добавить обратные вызовы событий шрифтов JavaScript к объекту TypekitConfig.

Преимущества:

Загружает комплект асинхронно (не блокирует дальнейшую визуализацию страницы во время загрузки).

Недостатки:

Добавляет больше байтов на вашу HTML-страницу, чем стандартный код для встраивания Typekit. Вызывает начальный FOUT во всех браузерах, которые нельзя контролировать или скрывать с помощью событий шрифта.

Error: User Rate Limit Exceeded

Похожие вопросы