js uses ajax to load js, displays the loading progress, and loads the pages in strict accordance with the order of js

js uses ajax to load js, displays the loading progress, and loads the pages in strict accordance with the order of js.
When doing mobile phone development, a problem is found. In some browsers, when the network speed is relatively slow, the js file is not loaded. 's call has already started, resulting in an error.
Later, this method is used to ensure that the execution of js is completely followed at any time.

Source code:

/**
* js uses ajax to load js, displays the loading progress, and loads it to the page in strict accordance with the order of js
* Principle: use ajax asynchronous multi-threaded fast loading, after each file is loaded, it is stored in the loading completion array,
* When displayed to the page, it is added to the page in the exact order it was passed in
* @param {array} files The list of files to be loaded, and added to the page one by one in this order when displayed
* @param {fun} funOk callback after loading is complete
* @param {fun} funPercent callback during loading
*/    
function ajaxLoadJs(files,funOk,funPercent) {
   var fileData = [];//Record the loaded file
   var oknum = 0; //Number of loaded completions   
   // load the file asynchronously in a loop
   for (var i = 0; i < files.length; i++) {
      loadfile(files[i]);
   }
   // load file
   function loadfile(file) {
      $.ajax({
          url: file,
          dataType: "text",
          success: function (data) {
            person++;
              fileData[file] = data; //Load successfully written to the array
              loadok(file);//Processing after successful call
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.log("Load failed: "+file)
              console.log(textStatus)
              console.log(errorThrown)                           
          }
      });
   }

   //Processing after successful loading
   function loadok(file) {
      //Calculate loading progress
      //Add 1 here, because it takes time to output js files to the page, and adding 1 is to count the time of outputting js as a file
      //In this way, after all files are loaded, it is 99%, and after the output to the page is completed, it is 100%     
      var percent = oknum  / (files.length + 1) ;
      if(typeof(funPercent)=="function") funPercent(percent, file);

      //After the loading is complete, output js to the page in the order of transmission
      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"); //When the output is completed, the loading is considered complete
         if(typeof(funOk)=="function") funOk(); //callback completion event
      }     
   }
}

Example of use:

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

  

  

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325090515&siteId=291194637
Recommended