Question

我使用序列图像制作动画。我使用setinterval函数动画运行图像很好，但我不知道为什么它暂停了一段时间。我在这里贴了小提琴看这个小提琴，你可以注意到这个暂停

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

请朋友们帮帮我。

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]);

Answer 2

在设置动画之前，请确保先预装图像。使图像准备就绪并加载以便顺利显示。您可以使用此preloader。我想建议，不要更改<img>的src，最好将图片绘制到<canvas>，然后为下一张图片创建<canvas>。

Setinterval动画有时会暂停

2 个答案:

Live demo