[jQuery] attr() on <link> crashing IE6
I am building a page that loads a css file through javascript. To help prevent "flash of unstyled content"[1], I am loading the CSS file as early as possible (before document.ready()). I am using jQuery 1.3.2.<div>
</div><div>In Firefox 3.5.1 and Chrome 2.0.172.37 this is working properly, but in IE6 the browser crashes (not just a javascript error, but a full-blown crash).</div><div>
</div><div>I've narrowed it down to this bit of code that reproduces the problem:
</div><div>
</div><div><font class="Apple-style-span" face="'courier new', monospace"><script type="text/javascript"></font></div><div><font class="Apple-style-span" face="'courier new', monospace">var link = $('<link></link>');</font></div>
<div><font class="Apple-style-span" face="'courier new', monospace">link.attr({</font></div><div><font class="Apple-style-span" face="'courier new', monospace"> href: 'foo.css',</font></div><div>
<font class="Apple-style-span" face="'courier new', monospace"> rel: 'stylesheet'</font></div><div><font class="Apple-style-span" face="'courier new', monospace">});
</script></font></div>
<div>
</div><div>After some more testing I found that if I remove the "rel" attribute <b>or</b> the "href" attribute, the script runs fine and IE6 won't crash. It's only when I use both of them together.</div>
<div>
</div><div>Are there alternatives to loading stylesheets on-demand, perhaps something similar to $.getScript()? Thanks!</div><div><div>
</div><div>1. <a href="http://en.wikipedia.org/wiki/Flash_of_unstyled_content">http://en.wikipedia.org/wiki/Flash_of_unstyled_content</a><br clear="all">
--
Hector
</div></div>