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

Preload stylesheet without executing it on the page

本文关键字：执行 加载 样式      更新时间：2023-09-26

是否有任何方法可以在不在页面上执行样式表的情况下预加载样式表，以便通过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的一些jQuery解决方案）。

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

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

感谢您的帮助

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

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

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

您是否想过尝试另一种方法，例如在样式表上进行媒体查询。

<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/

相关文章：