javascript - Setinterval 动画有时暂停

Question

我使用序列图像制作动画。我使用 setinterval 函数动画运行图像运行正常，但我不知道为什么它会暂停一段时间。我在这里发布了 fiddle 看看这个 fiddle 你可以注意到这个暂停

Unwanted Pause Happen Here

myAnim = setInterval(function(){
  $("#myImageHolder8").attr('src', nextImage5[u]);
  u++;
  if(u==nextImage5.length)
  {
    u=0;
  }
}, 50);

请 friend 帮帮我。

Answer 1

您需要预加载图像。将图像源设置在循环内肯定会在某个时间点引起卡顿，因为加载和解码图像可能会超过 50 毫秒(缓存或不缓存)。这也会导致问题随机出现(速度较快的计算机可能不会注意到，而速度较慢的计算机或较慢的连接可能会导致这种情况更频繁)。

预加载图像，然后简单地将加载的图像插入到容器(父元素)中。

您可以通过将图像隐藏在 DOM 中并使用 window.onload 来预加载图像，或者使用数组和加载计数器在 JavaScript 中进行预加载。

一个加载器的例子:

Live demo

var images = [],
    count = nextImage5.length,
    len = count,
    i = 0;

for(; i < len; i++) {
    var img = new Image;
    images.push(img);
    img.onload = loader;
    img.src = nextImage5[i];
}

function loader() {
    count--;
    if (count === 0) {
        ... start animation here...
    }
}

然后在动画循环中做类似的事情(抱歉，我的 jQuery 逃避了我，但你明白了这一点):

$('#myImageHolder8').html('');
$('#myImageHolder8').append(images[u]);