延迟脚本加载

Question

所以,如果我有以下内容:

<script type="text/javascript" src="offsite file I am referencing"></script>

我只想延迟使用settimeout调用该文件的执行,我该怎么做呢？

非常奇怪的是,在一个简单的函数上使用settimeout我没有问题,但我在这个看似更简单的情况下有点难过.

我的想法是我可以创建一个在x时间后调用该文件的函数,但调用函数中的文件似乎正在逃避我.

Answer 1

你快到了.

在你的settimeout回调函数中执行以下操作:

var script = document.createElement('script');
script.src = "http://whatever.com/the/script.js";
document.getElementsByTagName('head')[0].appendChild(script);

Answer 2

最简单的方法是让脚本文件正常加载,只需调用其中的main函数,setTimeout()如下所示:

<script type="text/javascript" src="offsite file I am referencing"></script>
<script type="text/javascript">
setTimeout(executeMainFunction, 5000);    // function in offsite js file
</script>

如果由于某种原因无法执行此操作,则可以延迟加载外部脚本文件,如下所示:

setTimeout(function() {
    var headID = document.getElementsByTagName("head")[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = 'http://www.somedomain.com/somescript.js';
    headID.appendChild(newScript);
}, 5000);

这是一篇关于动态加载脚本文件(和其他类型的资源)的参考文章:http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS.

Answer 3

您可以使用DOM操作在运行时创建新的脚本标记.将其添加到文档中将加载外部JS文件,就像您首先将其写入HTML一样.

var loadScript = function(sourceSrc){
    var scriptTag = document.createElement('script');
    scriptTag.src = scriptSrc;
    document.getElementsByTagName('head')[0].appendChild(scriptTag);
}

Answer 4

您可以使用HTML script defer 属性延迟脚本加载，直到页面完成加载：

<script src="offsite file I am referencing" defer></script>