Defer all the things: deferred styles

[jdan]

My solution contains the following code:

var hrefs = [
  'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css',
  'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css',
];

hrefs.forEach(function(href) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  link.media = 'only x';

  document.head.appendChild(link);

  setTimeout(function() {
    link.media = 'all';
  }, 0);
});

Running the code gives the following error:

# Link tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
✓ Stylesheet has a <noscript> fallback <link> just in case
✗ Link tag is properly loaded and has media type 'all'

# Link tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
✓ Stylesheet has a <noscript> fallback <link> just in case
✗ Link tag is properly loaded and has media type 'all'

If I change my code to:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
link.media = 'all';

It works :( But I assume it's not deferred at this point.

[bevacqua]

Uh, that doesn't seem quite right. Can you dig into it?