Question

通常，您的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的情况，你想要执行一个动作，比如点击一个按钮，需要一些框架功能，比如引导程序提供的东西，它们需要在点击后立即加载。

在我的理解中，这并不像听起来那么容易，因为在已经渲染一边之后需要加载的框架需要执行OnReady调用。有没有简单的方法来实现这个目标？

亲切的问候，的Marius

Answer 1

＆＃34;想象一下你从一开始只加载了jQuery而你想要执行一个动作，比如单击一个按钮并需要一些框架功能，比如引导程序提供的东西，它们需要在之后加载点击。＆＃34;

您所描述的是lazy loading依赖项。

RequireJS做得非常好。

Answer 2

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

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

在https://css-tricks.com/thinking-async/

了解有关异步加载的详情

如果您有其他理由在某个事件后加载js，请使用以下方法：

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

您可以将脚本的地址作为loadJavaScript('https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js')

传递

<强>更新

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

＆＃13;

$(document).ready(function() {
	$('#test').click(function() {
  	console.log("oO");
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    loadJavaScript('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js',function(){
    $('.selectpicker').selectpicker('refresh');
    });
  });
});


function loadCss(url,fn) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

function loadJavaScript(url)
{
    var s = document.createElement('script');
    s.setAttribute('src', url);
    s.setAttribute('async',false);
    if(typeof(fn) == "function")
    {
      fn();
    }
    document.head.appendChild(s);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test" type="button" class="btn btn-primary">Basic</button>
<select class="selectpicker">
<option>1</option>
</select>

＆＃13;

Javascript在onReady之后加载外部框架

2 个答案: