Skip to content

Instantly share code, notes, and snippets.

@emjayess

emjayess/async-css.js

Created October 10, 2012 21:49
Show Gist options
  • Save emjayess/3868681 to your computer and use it in GitHub Desktop.
Save emjayess/3868681 to your computer and use it in GitHub Desktop.
Download ZIP
simple async loading patterns
Raw
async-css.js
// load a style
;(function(d) {
var lnk = d.createElement('link'), h = d.getElementsByTagName('head')[0];
lnk.href = 'css.css';
lnk.type = 'text/css';
lnk.rel = 'stylesheet';
h.appendChild(lnk);
}​(document))​​​​;
Raw
async-iframe.js
// iframe (dynamic async)
// http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance
;(function(d) {
var iframe = d.body.appendChild(d.createElement('iframe'));
var idoc = iframe.contentWindow.document;
if ('srcdoc' in iframe) {
// write to the 'srcdoc' attribute
}
// or
idoc.open().write('<body onload="' +
'var d = document;d.getElementsByTagName(\'head\')[0].' +
'appendChild(d.createElement(\'script\')).src' +
'=\'\/path\/to\/file\'">');
idoc.close(); //iframe onload event fires
}​(document));
// see also: http://calendar.perfplanet.com/2010/fast-ads-with-html5/
// for srcdoc and seamless attributes
function supports_srcdoc() {
return 'srcdoc' in document.createElement('iframe');
}
// srcdoc polyfill: https://github.com/jugglinmike/srcdoc-polyfill/
​
Raw
async-js.js
// load a script
;(function(d) {
var js = d.createElement('script'), h = d.getElementsByTagName('head')[0];
js.src = 'js.js';
h.appendChild(js);
}(document));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment