緩慢/無反應/卡住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腳本

回答

相關問題