「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

梅問題-Lazy Load CSS非同步載入CSS,當網頁使用雲端字型更順暢
  自從CSS3支援字型載入後,讓網頁從此不再只有新細體,同時就目前免費的雲端字型,只有Google與Adobe這二間公司,但Adobe則是有流量的限制,雖然說Google不但完全不限制,甚至也不用綁定網域與註冊為會員,大家都能盡情的享用Google所提供的雲端字型,看起來相當的不錯,但有使用過的朋友,應該會發現到,當載入Google的端字型時,一開始畫面會全白,當字型載入完成後,才會一次出現。
  會造成這樣的原因,最主要在於Google是以自家的頻寬優勢,讓使用者直接一次載入完整的字型檔,因此當在載入的過程中,畫面會呈現全白的狀態,直到將字型載入完成,這對於使用者來說,會誤以網站是不是掛了而跳出,因此今日要分享一個CSS非同步載入的方式,來解決雲端字型載入的問題,讓一開始是以預設的字型,像是新細明或微軟中黑,當字型載入完畢後,再一併的套入到網頁中,如此一來就不會像造成先前的問題。
以往當網頁要套用CSS時,都會將css以link的方式,寫在網頁的head間。
梅問題-Lazy Load CSS延遲載入CSS,當網頁使用雲端字型更順暢
這時會看到,一開始畫面是全白,直到雲端字型全部載入完畢後,畫面才會一次顯示出來。
梅問題-Lazy Load CSS延遲載入CSS,當網頁使用雲端字型更順暢
因此這時將下方的語法加入後,當要載入CSS時,將css放到a.href,當有多組多,就自行建立多個,最後再z.parentNode.insertBefore依序的加入即可。
<script>
    var cb = function() {
        var a = document.createElement('link'); 
        a.rel = 'stylesheet';
        a.href = 'fonts/general-j/mplus_webfonts.css';
    
        var b = document.createElement('link'); 
        b.rel = 'stylesheet';
        b.href = 'fonts/basic_latin/mplus_webfonts.css';
    
        var z = document.getElementsByTagName('head')[0];
        z.parentNode.insertBefore(a,z);
        z.parentNode.insertBefore(b,z);
    };
        var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>
梅問題-Lazy Load CSS延遲載入CSS,當網頁使用雲端字型更順暢
完成後,立馬來看一下,一開始會先顯示預設的字型,當字型檔全部下載完成後,再套入並顯示。
梅問題-Lazy Load CSS延遲載入CSS,當網頁使用雲端字型更順暢
[範例預覽-同步載入] [範例預覽-非同步載入]

相關文章

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3的新單位(vh/vw)讓Bootstrap廣告輪播也支援全版廣告

CSS3的新單位(vh/vw)讓Bootstrap廣告輪播也支援全版廣告





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。