title: loading progress/percent of all contents
body: <p>I have some files such as images,json... I want to load them before running the <code>main()</code> function, and show the progress in percents when loading.
  This is my code:</p>
  
  <pre><code>function main(){...}
  function progs(imgUrlArray,jsonUrlArray,otherFilesArray){
   var total = imgUrlArray.length + jsonUrlArray.lenght + otherFilesArray.length;
   var increment =  0;
   var percent = 0;
   //method to load image
   for(var i in imgUrlArray){
    $('&lt;img&gt;').attr({
     src:imgUrlArray[i],
     onload : function(){
      increment++;
      percent = total/increment;
      updateProgress(percent);
     }
    })
   }
   //method to load other file here
  }
  function updateProgress(percent){
   $('#progressBar').width(percent*100+'%').text(percent*100+'%');
   if(percent&gt;=1){
    $('#progressBar').text('complet').animate({opacity:0,height:0},1000,function(){
     $(this).hide();
     main();//now run the main() function
    });
   }
  }
  </code></pre>
  
  <p>I need something like that to load json &amp; <strong>other</strong> files as image method, but effective and work correctly when <code>main()</code> is running without showing incomplete images or files.</p>