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

最新推荐文章于 2020-12-03 15:28:44 发布

lucky52zf

最新推荐文章于 2020-12-03 15:28:44 发布

阅读量1.2k

点赞数 1

分类专栏： IT-js 文章标签： javascript

本文链接：https://blog.csdn.net/lucky52zf/article/details/55667844

版权

IT-js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

lucky52zf

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一种自定义js文件加载时间的方法

当我们想让js文件在一个自定义的行为之后再进行加载，有时我们会束手无策。因为我们见到大多都是这样来加载js文件的<script type="text/css" href="hello.js"></script>然而，这样的js是在页面加载的时候就自动加载了，不能满足我们想要通过某一个事件触发进行加载。下面小编来介绍一种通过触发某一事件而加载js文件的方法。代码如下：window.onload =
复制链接

扫一扫

专栏目录