计时器调用Javascript函数，其他事情正在发生

Question

我有一个网页，动画播放一系列网络摄像头照片。我将所有图像预加载到一个数组中，然后从SetInterval调用一个显示数组中下一个图像的函数。图像显示就像document.animImage.src = anims[frame].src;一样简单，每次调用都会增加frame（并检查边界）。

然而，每次循环，当它回收到0时，网页暂停，下载了一堆东西（但不是所有的图像，可能是25-26个）， ......然后它再次穿过它们。我想弄清楚暂停。它正在下载额外的资源，但我不明白为什么。

我用

加载图片

        $directory = "./";
        $images = glob($directory . "*.jpg");
    ?>
    <script type="text/javascript">
        imageLoad(<?php echo json_encode($images); ?>);
    </script>

然后

    function imageLoad(images)
        {
            document.timeout_state = 1;
            images.sort();
            length = images.length;
            for (var i = 0; i < length; i++) 
            {
                anims[i] = new Image();
                anims[i].src = images[i];
            }   
            document.timeout_state = 0;
        }

最后，调用帧动画的定时器是

        function animator() 
        {
            frame =  (frame + 1);
            if (frame > length)
            {
                frame = 0;
            }

            if (document.timeout_state == 0)
            {
                document.animImage.src = anims[frame].src;
            }   

        }

您可以在http://www.PatrickHarvey.com/froghollow处看到该页面（链接到该页面）。将间隔设置为10 ms，您可以在循环结束时看到奇数暂停。