Question

我在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>

的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;
    };
};

重点是我有一个div与动画列表，而在其他div是动画容器（动画=更改此容器的背景图像）。点击第一个div中的一些span执行动画，这意味着将图像加载到浏览器的缓存中，并且在加载图像时，有一个间隔函数checkProgWidth（），它计算进度百分比 - ＆gt;如果它等于100（所有图像都被加载），则停止间隔并开始动画。

http://hlavsene.sav.sk/test/sos上的演示。

问题：

1。）当一个动画的图像正在加载时（当进度条处于移动状态时）并且在此期间我选择（单击）相同或另一个动画我需要停止加载第一个动画的图像并开始加载第二个。但我不能这样做。您可以在演示网站上的动画3和4（它们有很多图像，因此加载很长）上看到它。进度条开始变得疯狂，我认为浏览器开始从两个动画加载图像，这意味着它不会停止从第一个动画加载图像。或许还有另一个问题..你有什么建议吗？

2.。）有时在更改图像之间会出现眨眼，有时则不然。你知道为什么吗？

我真的很感激任何帮助。谢谢你们，伙计们。

Answer 1

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;}
}

两个图像的预加载器

1 个答案: