Javascript 在onReady之后加载外部框架_Javascript_Jquery_Html_Css

Javascript 在onReady之后加载外部框架

javascript jquery html css

Javascript 在onReady之后加载外部框架,javascript,jquery,html,css,Javascript,Jquery,Html,Css,通常，HTML源代码的head元素中包含了所有框架（脚本和css），在呈现页面时，这些框架将被加载。例如，我想加载jQuery和boostrap，它看起来像这样： <html> <head> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <link href="jquery.mi

通常，HTML源代码的head元素中包含了所有框架（脚本和css），在呈现页面时，这些框架将被加载。例如，我想加载jQuery和boostrap，它看起来像这样：

<html>
  <head>
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link href="jquery.min.css"\>
    <link href="bootstrap.min.css"\>
  </head>
</html>

但是想象一下这样一种情况：您从一开始就只加载jQuery，并且您想要执行一个操作，比如单击按钮，并且需要一些框架功能，比如bootstrap提供的功能，它们需要在单击之后立即加载

在我的理解中，这并不像听起来那么容易，因为在端已经呈现之后需要加载的框架需要执行OnReady调用。有什么简单的方法可以做到这一点吗

亲切问候,， Marius

“想象一下这样一种情况：您从一开始就只加载了jQuery，并且您想要执行一个操作，如单击按钮，并且需要一些框架功能，如bootstrap提供的功能，这些功能需要在单击后立即加载。”

您所描述的是依赖关系

这一点做得很好。

如果您想这样做以提高用户的页面加载性能，您可以简单地使用标记的async属性，如下所示：

<script src="jquery.min.js" async></script>

您可以将脚本的地址传递为

loadJavaScript（'https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js）

更新

在脚本加载时使用onload处理程序调用函数：

$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（）{
控制台日志（“oO”）；
loadCss（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
加载JavaScript（'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js，函数（）{
$（'.selectpicker'）。selectpicker（'refresh'）；
});
});
});
函数loadCss（url，fn）{
var link=document.createElement（“链接”）；
link.type=“text/css”；
link.rel=“样式表”；
link.href=url；
document.getElementsByTagName（“头”）[0].appendChild（链接）；
}
函数loadJavaScript（url）
{
var s=document.createElement（'script'）；
s、 setAttribute（'src'，url）；
s、 setAttribute（'async'，false）；
if（类型（fn）=“功能”）
{
fn（）；
}
文件。标题。附录子项；
}


基本的
1.

最佳做法是脚本放在body标记的末尾，而不是head。您可以手动触发这些调用，如

$（document）。trigger（'ready'）

将视图/页面所需的文件打包到一个包中并加载它？使用

RequireJs

会有帮助吗？有具体问题吗？或者您可以编写一个示例来演示您的问题？jQuery有一个名为

$.getScript（path，callback）

的方法。你可以用它来做你想做的事。你可以为CSS做一些类似的东西，将其附加到头部并给予一点超时以确保加载。

在我看来，这并不像听起来那么容易

-首先，我在点击后寻找

加载JavaScript

► 嘿，谢谢你的快速回答，不幸的是，这对我不起作用，我做了一个小测试用例：@marius我得到了你的关注，所以在这种情况下，你必须使用onload处理程序，让我为你更新答案。不幸的是，仍然没有：/command$（'.selectpicker'）.selectpicker（'refresh'）；通常，一旦调用select字段，它就应该改变其外观，在本例中，它不是引导选择框架的一部分

function loadJavaScript(url)
{
    var s = document.createElement('script');
    s.setAttribute('src', url);
    s.setAttribute('async',true);
    document.head.appendChild(s);
}