一种自定义js文件加载时间的方法

来源：互联网发布：it认证编辑：程序博客网时间：2024/05/22 12:54

本博只适用于加载一个外部的独立js文件，其他情况敬请绕路。
当我们想让js文件在一个自定义的行为之后再进行加载，有时我们会束手无策。因为我们见到大多都是这样来加载js文件的

<script type="text/css" href="hello.js"></script>

然而，这样的js是在页面加载的时候就自动加载了，不能满足我们想要通过某一个事件触发进行加载。下面小编来介绍一种通过触发某一事件而加载js文件的方法。
代码如下：

window.onload = function() {      setTimeout(function(){          // reference to <head>          var head = document.getElementsByTagName('head')[0];          // a new CSS          var css = document.createElement('link');          css.type = "text/css";          css.rel = "stylesheet";          css.href = "hello.css";          // a new JS          var js = document.createElement("script");          js.type = "text/javascript";          js.src = "hello.js";          // preload JS and CSS          head.appendChild(css);          head.appendChild(js);          // preload image          new Image().src = "hello.png";      }, 1000);  };

这里假设使用window的onload事件触发hello.js。首先定义变量head获取 head标签对象，然后动态加入一个css样式表，再动态加入一个js文件，最后动态的加载图片资源，这样，这个js就在window的onload事件触发后自动的加载了。

1 0