我可以根据要求加载外部样式表吗？

Question

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

.. 就像上面根据请求加载外部 JS 的代码一样，是否有类似的东西可以在需要时加载外部 CSS 样式表？

例如，当我在网站上使用灯箱（内联弹出窗口）时，我希望避免加载灯箱 JS 和 CSS 文件，除非用户请求。

谢谢

Answer 1

你可以这样做：

$('<link>').attr('rel','stylesheet')
  .attr('type','text/css')
  .attr('href','link_to.css')
  .appendTo('head');

Answer 2

您只需在 head 中添加动态 HTML 内容即可添加对外部样式表的引用：

$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');

此内容将插入到 DOM 中，然后正常呈现，在这种情况下会导致获取外部样式表。

不过，也要注意 cletus 的回答，如果您不小心动态加载静态内容，最终可能会花费您的页面加载时间和过多的资源传输。

Answer 3

一般来说，如果你做得正确的话，最好只包含你需要的所有内容。

我的意思是，静态内容（图像、Javascript、CSS）的最佳实践是：

• 最小化外部 HTTP 请求（最小化文件数量）；
• 对文件进行版本控制并使用远期的 Expires 标头；
• 适当缩小和压缩内容。

因此用户只会下载给定文件一次，直到它发生更改。

动态加载 CSS 和 Javascript，除非特别大，否则通常是没有根据的并且会适得其反。

Answer 4

IE 问题...

我使 IE 6、7、8 崩溃，只需

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'assets/css/jquery.fancybox-1.3.4.css') );

将它们复制到主表中以避免另一个 http 请求，瞧。

Answer 5

我们可以直接附加它

$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));

Answer 6

是的：如果您创建链接到样式表的 标记并将其添加到 标记，浏览器将加载该样式表。

例如

$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');

但是，根据@peteorpeter的评论，这在 IE 8 或更低版本中不起作用 - 在那里，您需要：

1. 在设置其 href>;或者
2. 使用 IE 的 document.createStyleSheet() 方法

此外，检查链接是否已添加并不能在所有浏览器中可靠地工作。

我也会质疑你的部分前提：

我想避免在加载时加载灯箱 JS 和 CSS 文件，除非用户请求。

为什么？减少页面重量？我可以理解这种愿望，但你应该测量 CSS 和 JS 文件的大小（缩小和压缩后），其中是否包含灯箱代码，看看减少是否值得：

1. 按需加载增加的复杂性; 灯箱的响应能力略有
2. 下降（因为在按需加载时，灯箱必须等待自己的 CSS 和 JS 加载才能完成其任务）

在缩小和 gzip 压缩之后，很可能不会有太大差异。

请记住，您可以指示浏览器长时间缓存您的 CSS 和 JS，这意味着只有当用户访问您的缓存为空的网站时才会下载它。

Answer 7

$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');