使用Javascript的逐帧动画

我正在用Javascript制作一帧一帧的动画，通过设置一系列图像的动画

动画的代码非常简单

我的问题是，可以有很多图像，目前有200个，但最多可以有1000个。同时加载图像可能需要一些时间。我想先播放30幅图像的动画，然后在背景中预装剩余的图像。但有时，加载图像需要一段时间，因此会中断动画

如何使用“缓冲”暂停动画，并在下一个图像可用时继续动画？另外，当图像已经缓存时，如何跳过预加载？可以使用一些建议来改进代码

HTML

Javascript

var current = 0, // current playing image index
    next = 1, // next image index to play
    interval = 60, // animation speed
    hide_delay = 1, // Delay to hide the current image
    img_num = 200, // Total number of image
    pack = 10, // Images being preloaded simultanely
    idx_start = 149, // The images are index-suffixed so this is the index of the first image to preload
    idx_end = 300; // index of the last image in the sequence

var load_more = function()
{
    if(idx_start < idx_end)
    {
        // Preloading images
        var temp = [],
            temp_html = '';

        for(var i = 0; i < pack && idx_start < idx_end; i++)
        {
            temp[i] = 'images/stream/Calque-' + (++idx_start) + '.jpg';
        }

        preloadPictures(temp, function()
        {
            $.each(temp, function(i, v)
            {
                temp_html += '<img src=' + v + ' />';
            });
            // Inject into dom
            $('.video-stream').append(temp_html);

        });
    }    

}

var play_stream = function()
{
    $('.video-stream').find('img').eq(current).delay(interval).fadeOut(hide_delay)
    .end().eq(next).delay(interval).hide().fadeIn(hide_delay, play_stream);

    if(next < img_num - 1)
    {
        next++;
    }
    else
    {
        next = 0;
    }

    if(current < img_num - 1)
    {
        current++;
    }
    else
    {
        current = 0;
    }

    // Background preload
    if(idx_start < idx_end)
    {
        load_more();
    }    
};

$(window).load(function()
{
    play_stream();
});

var current=0，//当前播放的图像索引
next=1，//要播放的下一个图像索引
间隔=60，//动画速度
hide_delay=1，//延迟以隐藏当前图像
img_num=200，//图像总数
pack=10，//同时预加载图像
idx_start=149，//图像带有索引后缀，因此这是要预加载的第一个图像的索引
idx_end=300；//序列中最后一个图像的索引
var load_more=函数（）
{
如果（idx_开始

这是一种棘手的方法，但它就在这里。你只需要通过一组图像，而不是我的计数

var计数=0；
var缓冲区=1；
var Vbuffer=2；
setInterval（函数（）{
$（'#img.'+buffer）.prop（'src'，'https://placeholdit.imgix.net/~text？txtsize=33&txt='+count+'&w=150&h=150'）；
缓冲区=缓冲区%3+1；
$（'#img img'）。而不是（'.'+Vbuffer.hide（）；
$（'#img.+Vbuffer.show（）；
Vbuffer=Vbuffer%3+1；
计数++；
}, 1000);
var buffer2=1；
var Vbuffer2=2；
变量arrayOfImg=['https://placeholdit.imgix.net/~text？txtsize=33&txt=one&w=150&h=150'，
'https://placeholdit.imgix.net/~text？txtsize=33&txt=two&w=150&h=150'，
'https://placeholdit.imgix.net/~text？txtsize=33&txt=3&w=150&h=150'，
'https://placeholdit.imgix.net/~text？txtsize=33&txt=4&w=150&h=150'，
'https://placeholdit.imgix.net/~text？txtsize=33&txt=5&w=150&h=150'
]
var count2=0；
var arrayCount=arrayOfImg.length；
setInterval（函数（）{
$（'img2.+buffer2）.prop（'src'，arrayOfImg[count2]）；
buffer2=buffer2%3+1；
$（'#img2 img'）。而不是（'.'+Vbuffer2.hide（）；
$（'#img2.+Vbuffer2.show（）；
Vbuffer2=Vbuffer2%3+1；
count2=（count2+1）%arrayCount；
}, 1000);

缓冲区加载时等待3秒钟
我建议您将图像序列转换为视频格式，并使用html5视频标签。你甚至可以通过javascript控制它。这将有更好的跨浏览器/平台支持，并且可能更快（视频编解码器压缩、本机视频支持等）。您应该能够使用imagemagick等工具转换图像。我关心的是mobile上的“自动播放”问题。这是大多数移动平台上禁用自动播放的原因之一。请注意，如果您的总图像大小超过某些限制，则整个页面也将停止在某些设备上加载。我宁愿看录像带。是否希望某个站点通过您的手机网络下载大量数据？来自HTML规范：“用户代理不需要支持自动播放，建议用户代理尊重用户在这方面的偏好。建议作者使用“自动播放”属性，而不是使用脚本强制播放视频，以便允许用户在需要时覆盖该行为。“这是一个特定的要求，因此我必须坚持下去，但感谢您的回答，我会研究它！
.video-stream
{
    position: relative;
}
.video-stream img
{
    display: none;
    height: auto;
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
    vertical-align: top;
}

var current = 0, // current playing image index
    next = 1, // next image index to play
    interval = 60, // animation speed
    hide_delay = 1, // Delay to hide the current image
    img_num = 200, // Total number of image
    pack = 10, // Images being preloaded simultanely
    idx_start = 149, // The images are index-suffixed so this is the index of the first image to preload
    idx_end = 300; // index of the last image in the sequence

var load_more = function()
{
    if(idx_start < idx_end)
    {
        // Preloading images
        var temp = [],
            temp_html = '';

        for(var i = 0; i < pack && idx_start < idx_end; i++)
        {
            temp[i] = 'images/stream/Calque-' + (++idx_start) + '.jpg';
        }

        preloadPictures(temp, function()
        {
            $.each(temp, function(i, v)
            {
                temp_html += '<img src=' + v + ' />';
            });
            // Inject into dom
            $('.video-stream').append(temp_html);

        });
    }    

}

var play_stream = function()
{
    $('.video-stream').find('img').eq(current).delay(interval).fadeOut(hide_delay)
    .end().eq(next).delay(interval).hide().fadeIn(hide_delay, play_stream);

    if(next < img_num - 1)
    {
        next++;
    }
    else
    {
        next = 0;
    }

    if(current < img_num - 1)
    {
        current++;
    }
    else
    {
        current = 0;
    }

    // Background preload
    if(idx_start < idx_end)
    {
        load_more();
    }    
};

$(window).load(function()
{
    play_stream();
});