close
♣梅問題‧教學網【Minwt】♣ |
「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢 Posted: 07 Sep 2016 03:00 PM PDT
自從CSS3支援字型載入後,讓網頁從此不再只有新細體,同時就目前免費的雲端字型,只有Google與Adobe這二間公司,但Adobe則是有流量的限制,雖然說Google不但完全不限制,甚至也不用綁定網域與註冊為會員,大家都能盡情的享用Google所提供的雲端字型,看起來相當的不錯,但有使用過的朋友,應該會發現到,當載入Google的端字型時,一開始畫面會全白,當字型載入完成後,才會一次出現。
會造成這樣的原因,最主要在於Google是以自家的頻寬優勢,讓使用者直接一次載入完整的字型檔,因此當在載入的過程中,畫面會呈現全白的狀態,直到將字型載入完成,這對於使用者來說,會誤以網站是不是掛了而跳出,因此今日要分享一個CSS非同步載入的方式,來解決雲端字型載入的問題,讓一開始是以預設的字型,像是新細明或微軟中黑,當字型載入完畢後,再一併的套入到網頁中,如此一來就不會像造成先前的問題。
以往當網頁要套用CSS時,都會將css以link的方式,寫在網頁的head間。 這時會看到,一開始畫面是全白,直到雲端字型全部載入完畢後,畫面才會一次顯示出來。 因此這時將下方的語法加入後,當要載入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> 完成後,立馬來看一下,一開始會先顯示預設的字型,當字型檔全部下載完成後,再套入並顯示。 [範例預覽-同步載入] [範例預覽-非同步載入] |
You are subscribed to email updates from 梅問題.教學網. To stop receiving these emails, you may unsubscribe now. |
Email delivery powered by Google |
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States |
全站熱搜
留言列表