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');

Answer 2

你绝对可以做到这一点在click事件上或在您希望加载时执行此操作。例如，如果您在jquery中检查设备，请在检查后指定应加载哪个元素。

$( "#header" ).child( "<link rel=\"stylesheet\" media=\"all and (max-width: 960px) and (min-width: 481px)\" href=\"tablet.css\" />" );

Answer 3

您是否考虑过尝试其他方法，例如样式表上的媒体查询。

<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/large.css' />

来源： http://css-tricks.com/resolution-specific-stylesheets/

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

3 个答案: