• js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面


    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 ,
    做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错。
    后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的。

    源码:

    /** 
    * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
    * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, 
    *      显示到页面时完全按传入的顺序加入到页面 
    * @param {array}    files              要加载的文件列表,显示时也按照此顺序一个一个加入到页面
    * @param {fun}      funOk              加载完成后的回调
    * @param {fun}      funPercent         加载过程中的回调
    */    
    function ajaxLoadJs(files,funOk,funPercent) {
       var fileData = [];//记录加载完的文件
       var oknum = 0 ; //加载完成的数量   
       //循环异步加载文件
       for (var i = 0; i < files.length; i++) {
          loadfile(files[i]);
       }
       //加载文件
       function loadfile(file) {
          $.ajax({
              url: file,
              dataType: "text",
              success: function (data) {
                oknum++;
                  fileData[file] = data; //加载成功写入数组
                  loadok(file);//调用成功后的处理
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                  console.log("加载失败:"+file)
                  console.log(textStatus)
                  console.log(errorThrown)                           
              }
          });
       }
    
       //加载成功后的处理
       function loadok(file) {
          //计算加载进度
          //这里加1,因为输出js文件到页面,也需要时间,加1就是把输出js的时间计为一个文件
          //这样所有文件加载完成后是 99% ,输出到页面完成后,才是 100%     
          var percent = oknum  / (files.length + 1) ; 
          if(typeof(funPercent)=="function") funPercent(percent, file);
    
          //加载完成后,按传的顺序输出js到页面
          if (oknum == files.length) {
          for (var i = 0; i < files.length; i++) {
            var script = document.createElement('script');
            script.innerHTML = fileData[files[i]];
            document.getElementsByTagName('HEAD').item(0).appendChild(script);			
          }
          if(typeof(funPercent)=="function") funPercent(1, "all"); //输出完成即认为加载完成
             if(typeof(funOk)=="function") funOk();	//回调完成事件
          }     
       }
    }
    

    使用示例:

    var files = [
      'laz_word/controllers/word_set_ctrl.js?ver=31',
      'laz_word/controllers/word_set_ctrl.js?ver=31',
    ];
    ajaxLoadJs(files,function(){
        console.log("====over======");     
    },function(percent,file){	 
      console.log(percent,file);
    });
    

    来源:jsfun.cn
    http://www.jsfun.cn/#ajaxLoadJs

      

      

  • 相关阅读:
    软测管理工具实践-01
    Jquery中trim的用法
    java简单学习笔记20190124
    java简单学习笔记20190123
    java简单学习笔记20190122
    java简单学习笔记20190121
    java简单学习笔记20190120
    java简单学习笔记20190114及前
    java简单学习笔记20190115
    java简单学习笔记20190105
  • 原文地址:https://www.cnblogs.com/jsfuns/p/8969136.html
Copyright © 2020-2023  润新知