$.getScript('ajax/test.js',function() { alert('Load was performed.'); });
..像上面的代码加载一个外部JS的请求,是否有类似的东西可以加载外部CSS样式表,当需要时?
例如,当我在我的网站上使用灯箱(内联弹出窗口),我想避免加载灯箱JS和CSS文件onload,除非用户要求。
谢谢
解决方法
Yup:如果您创建< link>标记链接到样式表,并将其添加到< head>标签,浏览器将加载该样式表。
例如。
$('head').append('<link rel="stylesheet" type="text/css" href="lightBox_stylesheet.css">');
但是,as per @peteorpeter’s comments,这不工作在IE 8或以下,在那里,你需要:
>将< link>在设置其href之前;要么
>使用IE的document.createStyleSheet()方法
我也会质疑你的前提的一部分:
I want to avoid loading lightBox JS and CSS files onload,unless requested by the user.
为什么?减少页面重量?我可以理解的愿望,但你应该测量CSS和JS文件的大小(缩小和gzip后)与灯箱代码在那里,没有,看看是否减少是值得:
>按需加载的复杂性增加;和
> lightBox的响应性略有降低(因为当按需加载时,灯箱必须等待自己的CSS和JS加载,然后才能做它的事情)
在缩小和压缩之后,可能没有那么大的差别。
请记住,您可以指示浏览器缓存CSS和JS很长时间,这意味着它只有当用户使用空缓存访问您的网站时才会下载。