加载页面后加载脚本？

是否有可能时，页面的其余部分加载到加载某些脚本像加载页面后加载脚本？

<script type="text/javascript" src="somescript.js"></script>

？

想象一下，我有几个像这样的大型脚本文件，当页面加载时不需要。例如。我使用的Google地图API仅在单击按钮时使用（所以不能在页面加载时使用）。

在我处理所有脚本标记之前，是否可以先加载页面的其余部分？

来源

2011-03-30 matt

若他们列在头部，但如果您使用类似yepnope {http://yepnopejs.com/}的内容，则只有在需要时才能加载它们。 – idbentley 2011-03-30 19:10:34

在jQuery中你的文档准备

$.getScript("somescript.js", function(){ 
    alert("Script loaded and executed."); 
});

来源

2011-03-30 19:11:38 slandau

我学到了一个有用的功能！ – Miron 2017-07-28 07:20:02

使用jquery的getScript加入方法可do this！或者试着简单地把这个脚本放在页面的最后？

来源

2011-03-30 19:11:40

是的，这可以通过从代码动态注入JavaScript文件来实现。有很多库你可以使用：RequireJS，HeadJS等。最近我发现this文件，它比较了大量的JavaScript加载器库。

来源

2011-03-30 19:15:03

是的，这是完全可能的。将onLoad="foo();"事件添加到<body>标记，并让它调用脚本。你需要将你的外部JS包装在一个函数中，并执行如下操作：

//EXTERNAL JS (jsstuff.js) 

function Mojo() { 
    document.getElementById('snacks').style.visibility = "visible"; 
    alert("we are victorious!"); 
} 

//YOUR HTML 

<html> 
    <head> 
     <script type='text/javascript'></script> 
    </head> 
    <body onLoad='Mojo();'> 
     <div id='snacks'> 
      <img src='bigdarnimage.png'> 
     </div> 
    </body> 
</html>

来源

2011-03-30 19:16:00

这是可能的。我在AJAX密集型网站上做了类似的事情，但我正在加载Google Charts API。以下是我在页面上点击按钮时用于加载Google Charts API的代码。

function loadGoogleChartsAPI() { 
    var script = document.createElement("script"); 
    // This script has a callback function that will run when the script has 
    // finished loading. 
    script.src = "http://www.google.com/jsapi?callback=loadGraphs"; 
    script.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
} 

function loadGraphs() { 
    // Add callback function here. 
}

这使用了一个回调函数，该函数将在加载脚本时运行。

来源

2011-03-30 19:22:46 smfoote

地图确实：https：//developers.google.com/loader/ – 2013-09-20 03:30:58

没有人提到这些？

$(window).load(function(){ 
    // do something 
});

或

$(window).bind("load", function() { 
    // do something 
});

来源

2014-01-29 10:49:27 laike9m

简单，你可以添加到该脚本文件defer参数

<script src="pathToJs" defer></script>

，您可以检查this问题以及

来源

2015-08-11 22:40:46 nikoss

不，这是错误的。'async'参数指定脚本在准备就绪时执行，无论页面加载的程度如何。 '延期'可能是你在找什么。 – 2017-04-05 09:06:03

感谢您修复@AlexHolsgrove – nikoss 2017-04-05 18:32:46

$(document).ready(function() { 
    var ss = document.createElement("script"); 
    ss.src = "somescript.js"; 
    ss.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(ss); 
});

来源

2016-07-05 04:20:22

欢迎来到SO :)最好向您发布的代码添加一个解释作为答案，以便它可以帮助访问者理解为什么这是一个很好的答案。 – abarisone 2016-07-05 05:49:56

-1

要只是允许页面显示加载脚本之前，使用async属性：

<script src="//url/to/script.js" async></script>

隐藏在浏览器中加载微调，页面加载完成后脚本标签附加：

<script> 
document.addEventListener('DOMContentLoaded', function() { 
    var script = document.createElement('script'); 
    script.src = '//url/to/script.js'; 
    document.getElementsByTagName('body')[0].appendChild(script); 
}); 
</script>

来源

2018-01-28 12:08:36 danijar

加载页面后加载脚本？

回答

相关问题