异步加载js文件

//摘录部分 begin

HTML 4.01 的script属性

charset: 可选。指定src引入代码的字符集,大多数浏览器忽略该值。
defer: boolean, 可选。延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外,其他浏览器并未支持。
language: 已废弃。大部分浏览器会忽略该值。
src: 可选。指定引入的外部代码文件,不限制后缀名。
type: 必选。指定脚本的内容类型(MIME类型)。现实中通常不指定该值也可以,浏览器会默认当作text/javascript类型来解释执行。

 

HTML5中的script属性:

script 标签在HTML5中除了具备HTML5新标准定义的属性以外,和HTML4.01相比移除了language属性,修改了type属性为可选的(默认text/javascript),并新增了一个属性async。

async :boolean, 属性的作用,定义脚本是否异步执行,取值true或false。

如果 async 设为 true ,会忽略 defer 属性。


异步执行的 js 文件被假定为不使用 document.write()  向加载中的 document 写入内容,因此不要在 异步执行的 js 文件的加载执行过程中使用 document.write()

除了 script 标签属性外,页面引入 js 文件的方式影响其加载执行方式:

    任何以添加 script 节点(例如 appendChild(scriptNode) ) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中,只创建节点和设置 src 是不会加载 js 文件的(IE6-9 除外),这跟 img 的预加载不能类比 )  ,无需特别设置script.type,如果过设置,需要设置为 javascript 类型,否则不会加载 js 文件(text/javascript ,或者带版本号的,如果有特殊需求)
    html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的(较新的浏览器对阻塞的 js 可以并行加载了,但执行依然是同步的)
    html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的
    html文件中的<script>标签src属性所引用的js文件的代码内再使用document.write()方式引入的js文件是同步执行的
    使用 Image 对象异步预加载 js 文件(不会被执行,onload 事件不会触发,但是会触发onerror)

不要使用类似下面这种做法,这样并不会发起加载 js 文件的请求:

divNode.innerHTML = '<script src="xxx.js"></script>';

window.onload 事件会在 js 文件加载完毕才触发(即使是异步加载,还有 iframe 中网页的加载  )

 

 

不管是script 标签直接嵌入代码还是引入js文件,  script 标签的 js 代码都是解析一段然后执行一段,因此不要出现类似  在前一个script 标签的代码中使用 变量,在后一个标签的代码中定义变量 这种错误的做法。

 

=====================================================

//摘录部分 end




在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下:

function functionOne(){
    alert("成功加载");
}

回调函数方式

  在同一个文件夹下面创建一个function7.html,代码如下:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function init()
        {
            //加载package.js文件,设置script的id为yy
            loadJs("yy","package.js",callbackFunction);

        }
        function callbackFunction()
        {
            functionOne();
        }
        function loadJs(sid,jsurl,callback){
            var nodeHead = document.getElementsByTagName('head')[0];
            var nodeScript = null;
            if(document.getElementById(sid) == null){
                nodeScript = document.createElement('script');
                nodeScript.setAttribute('type', 'text/javascript');
                nodeScript.setAttribute('src', jsurl);
                nodeScript.setAttribute('id',sid);
                if (callback != null) {
                    nodeScript.onload = nodeScript.onreadystatechange = function(){
                        if (nodeScript.ready) {
                            return false;
                        }
                        if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
                            nodeScript.ready = true;
                            callback();
                        }
                    };
                }
                nodeHead.appendChild(nodeScript);
            } else {
                if(callback != null){
                    callback();
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

 这种方式所有浏览器都支持,但是后面的代码必须放在回调函数里面,也就是异步加载了

你可能感兴趣的:(异步加载js文件)