close
梅問題.教學網

♣梅問題‧教學網【Minwt】♣


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

Posted: 07 Sep 2016 03:00 PM PDT

梅問題-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,當網頁使用雲端字型更順暢
[範例預覽-同步載入] [範例預覽-非同步載入]
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 knoledge 的頭像
    knoledge

    討論

    knoledge 發表在 痞客邦 留言(0) 人氣()