用Javascript框架框架动画

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>

EDIT

添加阵列的结果，所以可以在通过的img源角色的阵列通过。