博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
高性能JS--载入脚本并执行
阅读量:4627 次
发布时间:2019-06-09

本文共 1992 字,大约阅读时间需要 6 分钟。

  1. 一般现代浏览器通过侦听事件获得脚本加载完成时的状态

    var
     script 
    =
     document.createElement(
    '
    script
    '
    );
    script.type 
    =
     
    '
    text/javascript
    '
    ;
    //
    Firefox, Chrome
    script.onload 
    =
     
    function
    (){
      alert(
    '
    script loaded!
    '
    );
    };
    script.src 
    =
     
    '
    http://code.jquery.com/jquery-1.4.2.min.js
    '
    ;
    document.getElementsByTagName(
    '
    head
    '
    )[
    0
    ].appendChild(script);

 
  1. ie支持另外一种方式,会触发readystatechange事件

    loading:开始下载

    complete:所有数据已准备就绪

    var
     script 
    =
     document.createElement(
    '
    script
    '
    );
    script.type 
    =
     
    '
    text/javascript
    '
    ;
    //
    IE
    script.onreadystatechange 
    =
     
    function
    (){
        
    if
    (script.readyState 
    ==
     
    '
    loaded
    '
     
    ||
     script.readyState 
    ==
     
    '
    complete
    '
    ){
            script.onreadystatechange 
    =
     
    null
    ;
            alert(
    '
    Script loaded
    '
    );
        }
    }
    script.src 
    =
     
    '
    http://code.jquery.com/jquery-1.4.2.min.js
    '
    ;
    document.getElementsByTagName(
    '
    head
    '
    )[
    0
    ].appendChild(script);

     

  2. 兼容方法

    /*
    *
    * 载入脚本
    * @param {String} url 载入的地址
    * @param {Function} callback 载入后需执行的函数
    */
    function
     loadScript(url, callback){
      
    var
     script 
    =
     document.createElement(
    '
    script
    '
    );
      script.type 
    =
     
    '
    text/javascript
    '
    ;
      
    //
    IE
      
    if
    (script.readyState){
          script.onreadystatechange 
    =
     
    function
    (){
              
    if
    (script.readyState 
    ==
     
    '
    loaded
    '
     
    ||
     script.readyState 
    ==
     
    '
    complete
    '
    ){
                  script.onreadystatechange 
    =
     
    null
    ;
                  callback();
              }
          }
      } 
    else
     { 
    //
    非IE
          script.onload 
    =
     
    function
    (){
              callback();
          }
      }
      script.src 
    =
     
    null
    ;
      document.getElementsByTagName(
    '
    head
    '
    )[
    0
    ].appendChild(script);
    }
    //
    example
    loadScript(
    '
    http://code.jquery.com/jquery-1.4.2.min.js
    '
    function
    (){
      alert(
    '
    File is loaded!
    '
    );
    })

     

  3. XMLRequest脚本注入

    var
     xhr 
    =
     
    new
     XMLHttpRequest();
    xhr.open(
    '
    get
    '
    '
    http://code.jquery.com/jquery-1.4.2.min.js
    '
    true
    );
    xhr.onreadystatechange 
    =
     
    function
    (){
        
    if
    (xhr.readySate 
    ==
     
    4
    ){
            
    if
    (xhr.status 
    >=
     
    200
     
    &&
     shr.status 
    <
     
    300
     
    ||
     xhr.status 
    ==
     
    304
    ){ 
    //
    200 有效响应; 304 从缓存读取
                
    var
     script 
    =
     document.createElement(
    '
    script
    '
    );
                script.type 
    =
     
    '
    text/javascript
    '
    ;
                script.text 
    =
     xhr.responseText;
                document.body.appendChild(script);
            }
        }
    };
    xhr.send(
    null
    );

转载于:https://www.cnblogs.com/milk/archive/2012/04/13/2445802.html

你可能感兴趣的文章
全局变量及输出语句
查看>>
Wiz开发 定时器的使用与处理
查看>>
在Windows 7下面IIS7的安装和 配置ASP的正确方法
查看>>
PL SQL笔记(三)
查看>>
Python - 1. Built-in Atomic Data Types
查看>>
修改ecshop的100种技巧
查看>>
每天一个linux命令(33):df 命令
查看>>
2018/11/29 一个64位操作系统的设计与实现 02 (安装nasm)
查看>>
java 的回调函数
查看>>
dp uva1218
查看>>
Codeforces Round #308 (Div. 2) C. Vanya and Scales dfs
查看>>
大数据【四】MapReduce(单词计数;二次排序;计数器;join;分布式缓存)
查看>>
(转载)深入浅出设计模式——桥接模式(Bridge Pattern)
查看>>
Windbg双机调试环境配置(Windows7/Windows XP+VirtualBox/VMware+WDK7600)
查看>>
iOS 缓存策略
查看>>
异常处理
查看>>
BestCoder Round #65 B C D || HDU 5591 5592 5593
查看>>
PHP5.5.13 + Apache2.4.7安装配置流程详解
查看>>
[THUWC2017]随机二分图
查看>>
软件测试实验一
查看>>