Javascript 两个图像预加载程序

我正在用javascript/jquery+html制作动画，代码看起来像这样（简化版）

• html:

  <div id="animationList">
    <ul>
      <li>
        <div>Testing animation 1</div>
        <div class="resolutionRow">
          <span>execute</span>
        </div>
      </li>
      <li>
        <div>Testing animation 2</div>
        <div class="resolutionRow">
          <span>execute</span>
        </div>
      </li>
    </ul>
  </div>
  
  <div id="content">
    <div id="statusBar">
      <div id="progressBar"></div>
    </div>
    <div id="animation"></div>
  </div>
  

  
  
  
  测试动画1
  处决
  
  
  测试动画2
  处决
  
  
  

• javascript:

  var imgCount[0]=30; //number of images for Testing animation 1
  var imgCount[1]=1000; //number of images for Testing animation 2
  var progressWidth=0; //default progressbar width
  var imgArray=new Array(); //array which will hold image sources strings
  var checkProgress;
  var goAnim;
  
  //if user choose an animation
  $('#animationList li span').click(function() {
    //need to stop older animation
    if(goAnim) clearInterval(goAnim);
    //ensure just one checkProgress interval is running (doesn't work)
    if(checkProgress) clearInterval(checkProgress);
    //get animation id
    animId=$(this).parent().parent().index();
    //call index function
    start();
  });
  
  function start() {
    //clear array with image sources
    if(imgArray.length>0) imgArray.length=0;
    //check progress status
    checkProgress=setInterval(checkProgWidth,10);
    //execute images preloader
    loadImageset(1);
  };
  
  //check progress percentage
  function checkProgWidth() {
    //start animation after progress percentage is 100 (if all images are loaded)
    if(progressWidth==100) {
      clearInterval(checkProgress); //stop this function
      goAnim=setInterval(animation,1000); //execute interval for animation function (won't write it here, it's not important)
    }
  };
  
  //preload images to browser's cache
  function loadImageset(i) {
    //merge img source
    imgSrc=animId+'/'+i+'.jpg';
    //create image object
    var imgCaching=new Image();
    //fill image object source
    imgCaching.src=imgSrc;
    //insert image source into array
    imgArray[i]=imgSrc;
      //do this stuff after image is loaded
      imgCaching.onload=function() {
        //count progress percentage
        progressWidth=Math.round((i/imgCount)*100);
        //set css of preloader div
        $('#statusBar').css({
          width:progressWidth+'%',
          backgroundColor:'#fff'
        });
        $('#statusBar').text(progressWidth+'%');
        //load next image...
        if(i<=imgCount[animId]) {
          i++;
          loadImageset(i);
        }
        //...or return
        else return;
      };
  };
  

  var imgCount[0]=30//用于测试动画的图像数1
  var imgCount[1]=1000//用于测试动画2的图像数
  var-progressWidth=0//默认进度条宽度
  var imgArray=新数组（）//将保存图像源字符串的数组
  var检查进度；
  var goAnim；
  //如果用户选择动画
  $（'#animationList li span'）。单击（函数（）{
  //需要停止旧的动画吗
  if（goAnim）清除间隔（goAnim）；
  //确保只有一个checkProgress间隔正在运行（不起作用）
  if（检查进度）clearInterval（检查进度）；
  //获取动画id
  animId=$（this.parent（）.parent（）.index（）；
  //调用索引函数
  start（）；
  });
  函数start（）{
  //使用图像源清除阵列
  如果（imgaray.length>0）imgaray.length=0；
  //检查进度状态
  checkProgress=setInterval（checkProgWidth，10）；
  //执行图像预加载程序
  加载图像集（1）；
  };
  //检查进度百分比
  函数checkProgWidth（）{
  //进度百分比为100后启动动画（如果加载了所有图像）
  如果（progressWidth==100）{
  clearInterval（checkProgress）；//停止此函数
  goAnim=setInterval（animation，1000）；//为animation函数执行interval（不会在此处写入，这并不重要）
  }
  };
  //将图像预加载到浏览器的缓存
  函数loadImageset（i）{
  //合并img源
  imgSrc=animId+'/'+i+'.jpg'；
  //创建图像对象
  var imgCaching=新图像（）；
  //填充图像对象源
  imgCaching.src=imgSrc；
  //将图像源插入阵列
  imgaray[i]=imgSrc；
  //在图像加载后执行此操作
  imgCaching.onload=函数（）{
  //计算进度百分比
  progressWidth=数学圆（（i/imgCount）*100）；
  //设置预加载程序div的css
  $（“#状态栏”）.css({
  宽度：progressWidth+“%”，
  背景颜色：“#fff”
  });
  $（“#状态栏”）.text（progressWidth+“%”）；
  //加载下一个图像。。。
  如果（i1），一旦你让浏览器开始下载，就没有可靠且有保证的方法停止加载图像。
  解决方法是使用AJAX下载它们，下载后通过设置img src重新下载（它们实际上将从浏览器的缓存中获取）
  
  此外，您可能应该保留一种动画对象，以及阻止它至少改变“画布”的方法，例如
  
  animation = {
    stopped: false,
    start: function () {
      for (var i = 0; i < imgCount; i++) {
        if (!this.stopped) {...}
        else return;
      }  
    },
    stop: function () {this.stopped = true;}
  }
  
  动画={
  停止：错误，
  开始：函数（）{
  对于（变量i=0；i
  1）一旦你让浏览器开始下载，就没有可靠且有保证的方法停止加载图像。
  解决方法是使用AJAX下载它们，下载后通过设置img src重新下载（它们实际上将从浏览器的缓存中获取）
  
  此外，您可能应该保留一种动画对象，以及阻止它至少改变“画布”的方法，例如
  
  animation = {
    stopped: false,
    start: function () {
      for (var i = 0; i < imgCount; i++) {
        if (!this.stopped) {...}
        else return;
      }  
    },
    stop: function () {this.stopped = true;}
  }
  
  动画={
  停止：错误，
  开始：函数（）{
  对于（变量i=0；i