-
-
Save Igelkottegrodan/e98834fa16d92f1b17d6 to your computer and use it in GitHub Desktop.
The deferred font loading logic for Smashing Magazine, with IE8 support and no access denied issues for localStorage in IE. http://www.smashingmagazine.com/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| "use strict"; | |
| // once cached, the css file is stored on the client forever unless | |
| // the URL below is changed. Any change will invalidate the cache | |
| var css_href = './css/fonts.css'; | |
| // a simple event handler wrapper | |
| function on(el, ev, callback) { | |
| if (el.addEventListener) { | |
| el.addEventListener(ev, callback, false); | |
| } else if (el.attachEvent) { | |
| el.attachEvent("on" + ev, callback); | |
| } | |
| } | |
| var localStorage = ((function () { | |
| try { | |
| if (window.localStorage.getItem) { | |
| return window.localStorage; | |
| } | |
| } catch (exception) { return null; } | |
| }())) || null; | |
| // if we have the fonts in localStorage or if we've cached them using the native batrowser cache | |
| if ((localStorage && localStorage.fontCssCache) || document.cookie.indexOf('fontCssCache') > -1) { | |
| // just use the cached version | |
| injectFontsStylesheet(); | |
| } else { | |
| // otherwise, don't block the loading of the page; wait until it's done. | |
| on(window, "load", injectFontsStylesheet); | |
| } | |
| // quick way to determine whether a css file has been cached locally | |
| function fileIsCached(href) { | |
| return localStorage && localStorage.fontCssCache && (localStorage.fontCssCacheFile === href); | |
| } | |
| // time to get the actual css file | |
| function injectFontsStylesheet() { | |
| // if this is an older browser | |
| if (!localStorage || !window.XMLHttpRequest) { | |
| var stylesheet = document.createElement('link'); | |
| stylesheet.href = css_href; | |
| stylesheet.rel = 'stylesheet'; | |
| stylesheet.type = 'text/css'; | |
| document.getElementsByTagName('head')[0].appendChild(stylesheet); | |
| // just use the native browser cache | |
| // this requires a good expires header on the server | |
| document.cookie = "fontCssCache"; | |
| // if this isn't an old browser | |
| } else { | |
| // use the cached version if we already have it | |
| if (fileIsCached(css_href)) { | |
| injectRawStyle(localStorage.fontCssCache); | |
| // otherwise, load it with ajax | |
| } else { | |
| var xhr = new XMLHttpRequest(); | |
| xhr.open("GET", css_href, true); | |
| // cater for IE8 which does not support addEventListener or attachEvent on XMLHttpRequest | |
| xhr.onreadystatechange = function () { | |
| if (xhr.readyState === 4) { | |
| // once we have the content, quickly inject the css rules | |
| injectRawStyle(xhr.responseText); | |
| // and cache the text content for further use | |
| // notice that this overwrites anything that might have already been previously cached | |
| localStorage.fontCssCache = xhr.responseText; | |
| localStorage.fontCssCacheFile = css_href; | |
| } | |
| }; | |
| xhr.send(); | |
| } | |
| } | |
| } | |
| // this is the simple utitily that injects the cached or loaded css text | |
| function injectRawStyle(text) { | |
| var style = document.createElement('style'); | |
| // cater for IE8 which doesn't support style.innerHTML | |
| style.setAttribute("type", "text/css"); | |
| document.getElementsByTagName('head')[0].appendChild(style); | |
| if (style.styleSheet) { | |
| style.styleSheet.cssText = text; | |
| } else { | |
| style.innerHTML = text; | |
| } | |
| } | |
| }()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment