Question

我正在使用Javascript通过动画制作一系列图像进行逐帧动画。

动画的代码非常简单。

我的问题是，可能会有很多图像，目前有200张但可能高达1000张。同时加载图像可能需要一些时间。我想最初使用30张图像播放动画并在后台预加载剩余部分。但有时，图像需要花费一些时间来加载，从而破坏动画。

如何使用“缓冲”暂停动画并在下一张图像可用时继续播放动画？还有如何在图像缓存时跳过预加载？可以使用一些建议来改进代码。

HTML

<div class="video-stream">
    <img alt="" src="images/stream/Calque-120.jpg" />
    <img alt="" src="images/stream/Calque-121.jpg" />
    <img alt="" src="images/stream/Calque-122.jpg" />
    <img alt="" src="images/stream/Calque-123.jpg" />
    <img alt="" src="images/stream/Calque-124.jpg" />
    <img alt="" src="images/stream/Calque-125.jpg" />
    <img alt="" src="images/stream/Calque-126.jpg" />
    <img alt="" src="images/stream/Calque-127.jpg" />
    <img alt="" src="images/stream/Calque-128.jpg" />
    <img alt="" src="images/stream/Calque-129.jpg" />
    <img alt="" src="images/stream/Calque-130.jpg" />
    <img alt="" src="images/stream/Calque-131.jpg" />
    <img alt="" src="images/stream/Calque-132.jpg" />
    <img alt="" src="images/stream/Calque-133.jpg" />
    <img alt="" src="images/stream/Calque-134.jpg" />
    <img alt="" src="images/stream/Calque-135.jpg" />
    <img alt="" src="images/stream/Calque-136.jpg" />
    <img alt="" src="images/stream/Calque-137.jpg" />
    <img alt="" src="images/stream/Calque-138.jpg" />
    <img alt="" src="images/stream/Calque-139.jpg" />
    <img alt="" src="images/stream/Calque-140.jpg" />
    <img alt="" src="images/stream/Calque-141.jpg" />
    <img alt="" src="images/stream/Calque-142.jpg" />
    <img alt="" src="images/stream/Calque-143.jpg" />
    <img alt="" src="images/stream/Calque-144.jpg" />
    <img alt="" src="images/stream/Calque-145.jpg" />
    <img alt="" src="images/stream/Calque-146.jpg" />
    <img alt="" src="images/stream/Calque-147.jpg" />
    <img alt="" src="images/stream/Calque-148.jpg" />
    <img alt="" src="images/stream/Calque-149.jpg" />
</div>

CSS

.video-stream
{
    position: relative;
}
.video-stream img
{
    display: none;
    height: auto;
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
    vertical-align: top;
}

的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();
});

Answer 1

这是一种棘手的方法，但就是这样。你只需要一组图像来传递而不是我的计数;

var count = 0;
var buffer = 1;
var Vbuffer = 2;
setInterval(function() {
  $('#img .' + buffer).prop('src', 'https://placeholdit.imgix.net/~text?txtsize=33&txt=' + count + '&w=150&h=150');
  buffer = buffer % 3 + 1;
  $('#img img').not('.' + Vbuffer).hide();
  $('#img .' + Vbuffer).show();
  Vbuffer = Vbuffer % 3 + 1;
  count++;
}, 1000);



var buffer2 = 1;
var Vbuffer2 = 2;
var 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=three&w=150&h=150',
  'https://placeholdit.imgix.net/~text?txtsize=33&txt=four&w=150&h=150',
  'https://placeholdit.imgix.net/~text?txtsize=33&txt=five&w=150&h=150'
]
var count2 = 0;
var arrayCount = arrayOfImg.length;
setInterval(function() {
  $('#img2 .' + buffer2).prop('src', arrayOfImg[count2]);
  buffer2 = buffer2 % 3 + 1;
  $('#img2 img').not('.' + Vbuffer2).hide();
  $('#img2 .' + Vbuffer2).show();
  Vbuffer2 = Vbuffer2 % 3 + 1;
  count2 = (count2 + 1) % arrayCount;
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
wait 3 seconds while the buffer loads
<div id='img'>
  <img src='' class='1' />
  <img src='' class='2' />
  <img src='' class='3' />
</div>

<div id='img2'>
  <img src='' class='1' />
  <img src='' class='2' />
  <img src='' class='3' />
</div>

修改

在结果中添加了数组，因此您可以将img源数组传递给角色。

使用Javascript逐帧动画

1 个答案: