Question

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

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

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

由于

Answer 1

是的：如果您创建一个链接到样式表的<link>标记并将其添加到<head>标记，则浏览器会加载该样式表。

E.g。

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

然而，as per @peteorpeter’s comments，这在IE 8中不起作用 - 在那里，您需要：

在设置<link>之前附加href ;或

使用IE的document.createStyleSheet()方法

此外，检查是否已添加链接在所有浏览器中都无法可靠地运行。

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

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

为什么呢？减少页面重量？我可以理解这个愿望，但你应该用那里的灯箱代码测量你的CSS和JS文件的大小（在缩小和gzipping之后），没有，看看减少是否值得：

按需加载的复杂性增加;和

灯箱的响应速度略有下降（因为按需加载时，灯箱必须等待自己的CSS和JS加载才能完成它的工作）

在缩小和压缩之后，可能没有太大的区别。

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

Answer 2

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

Answer 3

你可以这样做：

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

Answer 4

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

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

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

同时注意cletus的回答，好像你不小心动态加载静态内容一样，它最终会导致你的页面加载时间和资源转移过多。

Answer 5

一般来说，假设你做得正确，你最好只包括你所需要的一切。

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

最小化外部HTTP请求（最小化文件数量）;
版本文件并使用远期期货Expires标头;
根据需要缩小和压缩内容。

所以用户只会下载一次给定的文件，直到它发生变化。

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

Answer 6

IE问题......

我用

崩溃了IE 6,7,8

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

只需将它们复制到主页中以避免另外的http req，瞧。

Answer 7

我们可以直接附加

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

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

7 个答案: