預加載圖像在html5/javascript

Question

我見過預加載使用多個圖像的例子，但是我不知道如何將它們應用到我只有一個圖像的情況，我用src換出了幀。

我有一個精靈動畫，我正在做，但由於有很多圖像我想要使用，我必須在開始之前加載它們。

我知道onload會在每次src切換和加載時觸發。

如何在運行定時器之前預加載圖像？如果我使用「img」onload預加載，是否必須使用另一個Image對象來實際顯示？

<script type="text/javascript"> 
function init(){ 
    var numLabel; 
    var imgNumber = 1; 
    var lastImgNumber = 668; 
    var canvas = document.getElementById("mycanvas"); 
    var context = canvas.getContext("2d"); 
    var img = new Image; 

    img.onload = function(){ 
     context.clearRect(0,0,context.canvas.width,context.canvas.height); 
     context.drawImage(img,0,0); 
    }; 
    var timer = setInterval(function(){ 
     if(imgNumber>lastImgNumber){ 
     clearInterval(timer); 
     }else{ 
     numLabel = padNum(imgNumber++,5); 
     img.src = "sprite images/opt/movie"+numLabel+".jpg"; 
     } 
    }, 1000/24); 
} 
function padNum(num, digits){ 
    var str = num + ""; 
    return num.length >= digits? str: padNum("0" + str, digits); 
} 
</script> 

編輯：

我結束了下面的代碼。不過，我想我會看看下面提到的sprite sheet方法。

我基本上試圖用短剪輯來做全屏視頻，因爲我一直在閱讀html5視頻，但仍然有全屏的問題。另外，我認爲我可以獲得更好的質量。

<script type="text/javascript"> 
     var imageArray = new Array(); 
     var loadedImages = new Array(); 

     function init(){ 

      buildImageArray(); //Execute the function to create the array of images 
      var total = imageArray.length; 
      var count = 0; 



      // loop through the images and load. 
      while(count < total) { 
       loadImage("sprite images/opt/" + imageArray[count],count); 


       count++; 
      } 


     } 


     function padNum(num, digits){ 
      var str = num + ""; 
      return num.length >= digits? str: padNum("0" + str, digits); 
     } 

     function buildImageArray(){ 
      var firstImage = 1; 
      var lastImgNumber = 668; 
      var numLabel; 


      for(var i = firstImage; i<lastImgNumber+1;i++){ 
       numLabel = padNum(i,5); 
       imageArray.push("movie"+numLabel+".jpg"); 
      } 
     } 


     function loadImage(imageSrc,position) { 
     // actual function that loads image into DOM 

     var image = new Image(); // local scope, new object created per instance. 
     image.onload = function() { 
      if (!image) return; 

      loadedImages[position] = image.src; // record this image path as loaded in global scope 
      // or... store the objects themselves so you can inject them: 
      // loadedImages.push(this); 

      // sample report of progress 
      reportProgress(); 

      // remove event and self to prevent IE on animated gif loops and clear up garbage. 
      image = image.onload = image.onabort = image.onerror = null; 
     }; 

     image.src = imageSrc; 
     } 


     function reportProgress() { 
     // used to show how many images loaded thus far and/or trigger some event you can use when done. 

     // optional to show onscreen..., 'where' should be an object referencing an element in the DOM 
     // to do it silently, just remove the output bits below. 
     var output = "loaded "; 
     output += loadedImages.length; 
     output += " of "; 
     output += imageArray.length; 
     output += " images."; 
     $("#loader").html(output); 

      // this bit will fire when all images done: 
      if (imageArray.length == loadedImages.length) { 
       // total images onComplete. done. rewrite as you deem fit - call your main site load function from here 

       // keep in mind that if 1 of your images is a 404, this function may not fire, you 
       // may want to assign onerror and onabort events 

       //fire beginAnimation 
       beginAnimation(); 
      } 
     } 


     function beginAnimation(){ 
      var canvas = document.getElementById("mycanvas"); 
      var context = canvas.getContext("2d"); 
      var img = new Image; 
      var imgNumber = 0; 
      var lastImgNumber = 667; 


      img.onload = function(){ 
       context.clearRect(0,0,context.canvas.width,context.canvas.height); 
       context.drawImage(img,0,0); 


      }; 
      var timer = setInterval(function(){ 
       if(imgNumber>lastImgNumber){ 

        clearInterval(timer); 

       }else{ 

        img.src = loadedImages[imgNumber]; 
       } 
       imgNumber++; 


      }, 1000/20); 

     } 

    </script> 

Answer 1

這是不走這個路。

如果數量較小，我會提供第二種解決方案，但如果您認真擁有668張圖片，則需要將其剪掉。你不希望每個用戶（和你的服務器）發出668個請求，你當然不希望有一個IMG不斷地換出src。

您需要製作精靈表。單個圖像看起來像this。

使用類似texturepacker讓你的單幅影像精靈表：http://www.texturepacker.com/

當談到時間繪製在畫布上，您將需要一個具有X，Y，寬度的陣列，身高每一個可能的座標精靈在較大的圖像。

而不是做drawImage(img, x, y)您將使用畫布方法drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)。

這使您可以指定源矩形，每個圖像的矩形將不同。具體這些參數對應於此：

Answer 2

這裏是一個HTML5例子，如何使用knockoutjs https://github.com/mazhekin/HTML5MultiLoadImages