Javascript 预加载的图像开始平滑，15秒后变得起伏，无论谷歌Chrome中的活动如何

在其中，我预加载了许多人脸图像，用户可以通过在围绕中心人脸的圆圈周围移动一个标记来变形中心人脸。起初，面部变形平稳，但大约15秒后出现问题，图像过渡变得非常不稳定。请注意，对于我来说，无论用户输入如何，在不同操作系统的多台计算机上都会发生这种情况。我可以做些什么来保持图像过渡无限平滑

这是更新图像和标记的功能：

function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
    var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
    var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
    var theta = Math.atan2(y,x)*(180/Math.PI);        


    var cssDegs = convertThetaToCssDegs(theta);
    var rotate = 'rotate(' +cssDegs + 'deg)';
    cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
    $('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
    output =  cssDegs + randomOffset;
    output = (output % 360) + 1;
if (output < 0) {
    output = 360+output;// since angles go from 0 to 270 and then -90 back to 0
}
faceNum = Math.round(output/degreesPerFace);
if (faceNum < 1) {
        faceNum = 1;    
}
element.src = images[faceNum-1].src;
return [faceNum, cssDegs, output, xCoordinate, yCoordinate];

}

编辑：jQuery似乎出于我不知道的原因，在某个时候取消了获取图像的请求。从Chrome的网络选项卡中，我可以看到以下错误开始频繁出现：

如果我提示变换发生得太快，我不认为这是导致问题的原因，因为即使我加载小提琴，什么也不做，然后在15秒后开始与它交互，也会发生这种情况

编辑2：进一步检查，这个问题似乎是Google Chrome独有的，我在其他浏览器上的问题是使用我的脚本的旧版本造成的

---

我特别要感谢那些为我这样的新手做这件事的贡献者。

嗯。。。它是如何工作的？考虑使用CSS精灵代替几十个单独的图像，以及图像优化器。你可以考虑使用Chrome，右击，点击检查元素，看看时间线，看看在15秒内发生了什么。您还可以在脚本中放置分隔符，以查看是否是脚本问题。虽然我们无法看到您的实际调用，但从您的描述来看，您请求转换的速度似乎比应用转换的速度快，这会导致堆叠，从而导致不稳定的操作。确保您可能正在使用的循环或setInterval例程不能超越自身。通常这只需要将setInterval转换为尾部递归setTimeout或oncomplete调用。它成功地预加载了图像，并平滑地显示它们，结果。。。但一段时间后，它决定重新下载图像，从而使预加载变得无用。有没有办法阻止它检查图像的新版本？