javascript - 预加载样式表而不在页面上执行它

Question

有没有办法预加载样式表而不在页面上执行它，以便通过 javascript 或 jQuery 将其存储在缓存中？

我知道这是一个奇怪的请求，但这是为什么我想这样做:

我有适用于台式机、平板电脑和手机的样式表。我只想为正在使用的设备加载必要的规则。

我知道有这个选项:

<link rel="stylesheet" media="all and (max-width: 960px) and (min-width: 481px)" href="tablet.css" />
<link rel="stylesheet" media="all and (max-width: 480px)" href="phone.css" />

但是我也想支持 IE8 并且我已经在使用 JavaScript 来处理各种屏幕尺寸的页面上的其他元素，所以我可以使用 JS 解决方案(可能会包含一些 Chris Coyier's jQuery solution )。

我想缓存 CSS，这样如果用户在桌面上或者能够将浏览器窗口的大小调整到另一个设备范围，他们就不需要等待样式表的加载断点。

已经检测到用户是否可以调整屏幕大小，所以我不需要对此的解决方案 - 我只需要知道是否可以使用 jQuery 或 JavaScript 缓存 css 样式表而无需实际影响页面布局，如果是如何影响页面布局？

谢谢你的帮助

Answer 1

function get_css(url) {
    var ss = $.ajax({
                type: 'GET',
                dataType: 'text',
                url: url,
                async: false
              }).responseText;
    return ss;
}

function add_css(css, id) {
    $("head").append('<style id="'+id+'" type="text/css">'+css+'</style>');
}

var desktop = get_css('desktop_styles.css');
var mobile = get_css('mobile_styles.css');

// Determine breakpoint
add_css(desktop, 'desktop_styles');

// Determine breakpoint
add_css(mobile, 'mobile_styles');