您的位置：首页 > Web前端 > JavaScript

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

2017-02-18 15:44 316 查看

本博只适用于加载一个外部的独立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事件触发后自动的加载了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航