缓慢/无反应/卡住typekit脚本

我的网站上安装了typekit，通常是两行js，刚好在打开的head标签之后，但对字体的加载速度非常缓慢/无响应，这可以通过刷新页面完全弥补，之后，typekit字体会完美并且非常快速地加载。但从用户的角度来看，他们永远不会知道这样做，所以他们将被用作默认字体。缓慢/无反应/卡住typekit脚本

我有typekit js作为元标记之前的开头标记之下的第一件事，并在jquery，jquery-ui和其他脚本中加载之前。

有没有其他人有这个麻烦？

来源

2012-05-29 sam

什么似乎对我的工作是加载脚本在异步模式 - 在typekit博客按规定，香港专业教育学院在波纹管

标准异步模式

复制它这第一种模式是最基本的。它基于由Steve Souders等网络性能专家编写的模式，并用于Google Analytics等其他JavaScript嵌入代码。

<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对象，并用您自己的套件ID替换默认值。您可以将JavaScript字体事件回调添加到TypekitConfig对象。

优点：

荷载试剂盒异步（而它加载不会阻止进一步的页面呈现）。

缺点：

增加了更多的字节比标准Typekit嵌入代码的HTML页面。在所有浏览器中导致无法用字体事件控制或隐藏的初始FOUT。

来源

2012-05-31 16:26:30 sam

“您可以将JavaScript字体事件回调添加到TypekitConfig对象。”这会是一个很好的用例吗？ – moey

缓慢/无反应/卡住typekit脚本

回答

相关问题