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

Question

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

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

例如,当我在我的网站上使用灯箱(内联弹出窗口)时,我想避免加载灯箱JS和CSS文件onload,除非用户请求.

谢谢

Answer 1

是的:如果您创建<link>链接到样式表的<head>标记并将其添加到标记,浏览器将加载该样式表.

例如

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

但是,根据@ peteorpeter的评论,这在IE 8或以下不起作用 - 在那里,您需要:

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

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

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

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

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

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

是的,它会加载样式表,但你不应该在`$()`中包装你的`link`语句只需使用`lightbox_stylesheet ='<link ... />'`并且`.append()`调用会做需要什么.您通常不希望在jQuery对象中包装任何不能包含在`div`中的内容. (4认同)
抬头:通过使用`if('head link [href = foo]')来检查是否已经添加`<link>```由于浏览器DOM限制而不可靠[http:// stackoverflow. COM /问题/ 6417157/jquery的选择器换链路元素合头). (2认同)
抬头2:这不会在IE中工作<= 8.参见[本问答](http://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie) (2认同)

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 的回答，如果您对静态内容的动态加载不小心，最终可能会导致页面加载时间和资源转移过多。