即时导入样式表和 JavaScript答案

【问题标题】：Import stylesheets and javascript on the fly即时导入样式表和 JavaScript
【发布时间】：2014-03-27 06:55:31
【问题描述】：

我有一个网站，其导航全部通过 ajax（使用 jquery）完成；每个页面都被动态加载到页面上的一个元素中。虽然我有一个通用样式表和 JS 脚本，但每个页面也有一个页面特定的样式表和 JS 脚本。加载这些特定于页面的脚本和样式表的最有效/最有效的方法是什么？在页面加载时，不需要大多数页面特定的脚本/样式表。仅当用户（通过 ajax）加载特定页面时才需要页面的脚本/样式表。我应该在页面加载时加载每个脚本和样式表吗？

另一种选择是在页面动态加载时简单地将适当的<link> 和<script> 元素附加到头部；但是，它们会被调用吗？另外，当调用不同的页面（通过ajax）时，我是否需要删除<link> 和<script> 元素？对于脚本，我可以使用 jQuery 的 .getScript() 函数。就效率和跨浏览器支持而言，最好的方法是什么？

谢谢！

【问题讨论】：

你看到这个stackoverflow.com/questions/574944/…
谢谢，但这仅涉及样式表，而不是 JS 文件。

标签： javascript jquery html css ajax

【解决方案1】：

Js 和 CSS 是一次性加载并被浏览器缓存（也取决于您的服务器配置）

所以如果你有一个 ajax，只包含 1 个 JS。你可以

在您的主页页脚插入这个 JS（延迟加载；先发制人的思维 .. 更快的第二页）
将 include JS 标记与 ajax 响应一起提供。（这里没什么复杂的。浏览器进行新的 JS 调用）
将你所有的 JS/CSS 组合成一个组合的 JS，将其推送到首页头部标签（关注性能和缓存）
文档准备好后，按照您的建议使用 getScript() 执行类似于 #1 的操作

【讨论】：

非常感谢您的回复！ #1、#2 和 #4 不解决动态加载 CSS，只是 JS，对吗？ CSS 文件可以加载到 body 或 footer 中吗？
适用于 css/js/img

【解决方案2】：

我知道可以做到这一点的一种方法是使用 RequireJS，但缺点是你所有的 JS 都需要定义为 AMD。

不知道你是否了解 RequireJS，但它是一个非常简洁的库，你可以把它想象成一个依赖注入器并以异步方式加载文件。如果您有兴趣，可以查看他们的文档：

Intro
CSS

【讨论】：

【解决方案3】：

在我评论您可以使用 CSS 做什么之前。

这是你可以使用 js 的方式：

var script = document.createElement('script');
script.src = "path to your src";
// load event
script.onload = function () {
    //some staff
};
document.head.appendChild(script);

另外，为了你，我会推荐阅读这个gist。

又一个不错的information。

【讨论】：