在 HTML5 Canvas 上预加载图像序列答案

【问题标题】：Preloading image sequence on HTML5 Canvas在 HTML5 Canvas 上预加载图像序列
【发布时间】：2014-04-29 22:26:29
【问题描述】：

我有这个动画，我在 5880 毫秒内显示 143 张图像。问题是动画运行不流畅，我想一定是我需要在画布上预加载这些图像。

代码如下：

//Request animation standarization for all browsers
var getRequestAnimationFrame = function () {
   return window.requestAnimationFrame ||
       window.webkitRequestAnimationFrame ||
       window.mozRequestAnimationFrame ||
       window.oRequestAnimationFrame ||
       window.msRequestAnimationFrame ||
       function ( callback ){
            window.setTimeout(enroute, 1000/41);
            //41 fps
       };
};


setTimeout(function(){

    var imgNumber = 1;
var lastImgNumber = 143;

var canvas = document.getElementById('utn');    
var ctx = canvas.getContext('2d');

var img = new Image;
img.onload = function(){
       ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
   ctx.drawImage( img, 0, 0 );
 };

var fpAnimationFrame = getRequestAnimationFrame();
var timer = function(){
    if (imgNumber>lastImgNumber){
        clearInterval( timer );
    }else{
            img.src = "img/utn_"+( imgNumber++ )+".png";
        fpAnimationFrame(timer);
      }
    };
fpAnimationFrame(timer); //Call animation the first time    
}, 6180); //the animation starts at 6.18s

感谢您的帮助。

【问题讨论】：

是的，建议进行预加载。另请参阅YAIL preloader :)

标签： html image canvas preload smooth

【解决方案1】：

是的，也许您需要预加载所有图像，然后显示序列。您需要使用图像预加载器，您可以在本网站上找到多个预加载器。 http://www.jqueryrain.com/demo/jquery-preloader-image/page/2/

【讨论】：