Prepend .css file - Firefox vs IE

Question

I found out IE has different behavior vs Firefox when I use this

$('head').prepend('');

That basically just to add the theme-2.css on top within HEAD tag (for theme purpose). I do that because I don't want it to load yet because I use the csspreload http://www.filamentgroup.com/lab/update%5Fautomatically%5Fpreload%5Fimages%5Ffrom%5Fcss%5Fwith%5Fjquery/

In Firefox, the .css file on top will be taken over in priority by files below. This works fine!

In IE, the NEW .css file being added later into HEAD will take effect. This doesn't matter it is on top or bottom.

1. How to fix this behavior for IE?
2. Is there a different image loader that I can input .css files into parameters and it loads from there? The current one must see .css file in link within html.

Thanks

Answer 1

I'm not entirely clear on what you're trying to accomplish here - are you attempting to add a stylesheet to the page dynamically without having it affect the page, in order to preload its images?

If so, this snippet might do want you want:

$('link[rel="stylesheet"][href="theme-2.css"]').attr('disabled', 'disabled');

That will disable the stylesheet, but it will remain loaded. If you want to turn it back on in the future you can do this:

$('link[rel="stylesheet"][href="theme-2.css"]').removeAttr('disabled');

Edit: What you really want, I suppose, is the functionality from the disabled attribute. You can actually set this when you prepend that stylesheet, and it won't be applied to the page. The snippets above just demonstrate how to do this dynamically.

Answer 2

First of all, there probably isn't a method of successfully doing what you want in Internet Explorer. Unless, in IE, you add the existing stylesheets again after you load the stylesheet in question.

Second, why not just modify the existing plugin?

Call it with:

$.preloadCssImages({extra: [{href: "/css/styles.css"}]});

Or if you have multiple extra CSS files:

$.preloadCssImages({extra: [{href: "/css/styles.css"}, {href: "/css/styles2.css"}]});

Etc.

Then, after the "parseCSS(document.styleSheets)" line at the bottom of the file, insert:

if (settings.extra)
{
    parseCSS(settings.extra);
}

Easy peasy.