判断js加载完成

清疚 2022-06-02 04:08 240阅读 0赞

判断js加载完成，（实现函数loadScript(url,callback)异步加载脚本，完成后执行回调函数，要求支持IE）

在“按需加载”的要求中，经常要判断当脚本加载完成时，要返回一个回调函数，那如何去判断一个脚本的加载完成呢？

可以对加载的JS对象使用onload来判断(js.onload), 此方法对Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。

IE6、IE7可以使用js.onreadystatechange来跟踪每个状态的变化（一般为loading,loaded,interactive,complete），当返回的状态为loaded、complete表示加载完成，返回回调函数。

在IE下的标签script有个属性readyState，即script.readyState=true，表示加载完成

注意：1、在interactive状态下，用户可以参与互动

2、opera其实也支持js.onreadystatechange，但是他的状态和IE有很大的区别

原生js:

function  loadScript(url,calback){
    
        var script = document.createElement('script');
    
        script.type = 'text/javascript';
    
        script.async = 'async';
    
        script.src  = url;
    
        document.body.appendChild(script);
    
        if(script.readyState){
            //IE下
            script.onreadystatechange = function(){    
    			if(script.readyState == 'complete'  || script.readyState == 'loaded'){     
    				script.onreadystatechange = null;
                    callback();
                }
             }
    
        }else{
     		script.onload = function(){
    			callback();
            }
        }
    }

或者用正则来表示

function  loadScript(url,calback){
    
        var script = document.createElement('script');
    
        script.type = 'text/javascript';
    
        script.async = 'async';
    
        script.src  = url;
        var reg = /^(complete|loaded)$/
    
        document.body.appendChild(script);
    
        if(script.readyState){
            //IE下
            script.onreadystatechange = function(){    
    			if( reg.test(script.readyState) ){     
    				script.onreadystatechange = null;
                    callback();
                }
             }
    
        }else{
     		script.onload = function(){
    			callback();
            }
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 js判断各种资源是否加载完成的方法汇总，资源预加载问题

将网站放在服务器后，因为服务器带宽问题，才发现很多资源比如图片、音频在网站打开后1分钟还没有加载，导致无法播放。所以说我决定使用js在最开头加一个判断资源是否加载完成的函数并运

古城微笑少年丶/ 2022年11月05日 00:47/ 0 赞/ 2071 阅读

相关 vue 数据加载完成后加载组件

html源码： <template> //:is里面装的是组件名称 :child="child"是指子组件需要的数据 <component :is="isComp

朱雀/ 2022年10月05日 05:45/ 0 赞/ 252 阅读

相关判断图片加载完成的JS操作

var a = { init:function(){ this.initDom(); this.handleImg

朴灿烈づ我的快乐病毒、/ 2022年09月26日 04:59/ 0 赞/ 151 阅读

相关判断网页加载完成

在实现编程打开网页时，常常会操作网页元素时会失败，这时很有可能是打开网页时没有加载完成照成的，网页没有加载完成而去操作网页元素时，当然会失败。为了杜绝这种现象，可以在操作

阳光穿透心脏的1/2处/ 2022年09月21日 05:35/ 0 赞/ 175 阅读

相关前端异步加载js且判断js是不是加载完成

1. /\\ 2. \ 异步加载依赖的javascript文件 3. \ src：script的路径 4. \ callback：当

矫情吗；*/ 2022年08月23日 03:48/ 0 赞/ 170 阅读

相关 vueJs实现DOM加载完成之后，调用js

参考 [ http://blog.csdn.net/u014445339/article/details/54929475][http_blog.csdn.net_u01444

素颜马尾好姑娘i/ 2022年06月04日 02:39/ 0 赞/ 241 阅读

相关判断js加载完成

判断js加载完成，（实现函数loadScript(url,callback)异步加载脚本，完成后执行回调函数，要求支持IE）在“按需加载”的要求中，经常要判断当脚本加载完成

清疚/ 2022年06月02日 04:08/ 0 赞/ 241 阅读

相关 js等待页面加载完成的几种方式

资源贴 [https://blog.csdn.net/ideality\_hunter/article/details/77935656 ][https_blog.csdn

刺骨的言语ヽ痛彻心扉/ 2022年05月14日 10:00/ 0 赞/ 1524 阅读

相关判断图片是否加载完成的六种方式

一、load事件 `<!DOCTYPE HTML>` `<html>` `<head>` ` ` `<meta charset=` `"utf-8"` `>`

爱被打了一巴掌/ 2022年01月07日 14:13/ 0 赞/ 849 阅读

相关 loader完成加载内核

第五章：保护模式进阶，向内核迈进。参考书籍：《操作系统真象还原》作者：郑钢这一章的内容有点硬，回头再看，还好。前五章，也是本书的第一部分。本章，分三部分：

た入场券/ 2021年11月23日 00:08/ 0 赞/ 330 阅读