Skip to content

Instantly share code, notes, and snippets.

@frontendbeast
Forked from hdragomir/sm-annotated.html
Last active October 13, 2020 09:28
Show Gist options
  • Save frontendbeast/53b5eea54ac4bc25d0a6 to your computer and use it in GitHub Desktop.
Save frontendbeast/53b5eea54ac4bc25d0a6 to your computer and use it in GitHub Desktop.
<script type="text/javascript">
(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 = './index_files/web-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);
}
}
// if we have the fonts in localStorage or if we've cached them using the native batrowser cache
if ((window.localStorage && localStorage.font_css_cache) || document.cookie.indexOf('font_css_cache') > -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 window.localStorage && localStorage.font_css_cache && (localStorage.font_css_cache_file === href);
}
// time to get the actual css file
function injectFontsStylesheet() {
// if this is an older browser
if (!window.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 = "font_css_cache";
// if this isn't an old browser
} else {
// use the cached version if we already have it
if (fileIsCached(css_href)) {
injectRawStyle(localStorage.font_css_cache);
// 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 && xhr.status === 200) {
// 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.font_css_cache = xhr.responseText;
localStorage.font_css_cache_file = 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");
// add the style element to the DOM before adding styles to it or IE8 will crash
document.getElementsByTagName('head')[0].appendChild(style);
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.innerHTML = text;
}
}
}());
</script>
@alistairtweedie
Copy link

I'm not sure why but this seems to crash IE8. I've moved it around the head from top to bottom but still no difference. Tested on Browserstack and on a virtual machine both are the same.

@frontendbeast
Copy link
Author

Yeah I've updated it to fix that bug, the style element must be added before the styles are inserted to prevent IE 8 crashing.

@alistairtweedie
Copy link

Just noticed your update! Thanking you very much sir. Works like a charm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment