JavaScript的圖像加載器不工作

Question

我試圖讓真正簡單的圖像加載器爲我的比賽，但我不能找出爲什麼這是行不通的。這裏是我的代碼：

window.onload = function() { 
    var canvas = document.getElementById('gameCanvas'); 
    var ctx = canvas.getContext('2d'); 

    var images = []; 

    function loadImages(imageFiles) { 
     var loadedImages = []; 

     for(var i = 0; i < imageFiles.length; i++) { 
      var image = new Image(); 

      image.onload = function() { 
       alert("Loaded"); 
      } 

      image.src = imageFiles[i]; 
      loadedImages[i] = image; 
     } 

     return loadedImages; 
    } 

    function init() { 
     images = loadImages(['img/1.png', 'img/2.png']); 

     main(); 
    } 

    function main() { 
     ctx.drawImage(images[1], 0,0); 
    } 

    init(); 
} 

所有我看到的是沒有圖像的空白畫布。

Answer 1

您需要將項目推入數組。更換

loadedImages[i] = image; 

與

loadedImages.push(image); 

Answer 2

嘗試

if(i==1){ 
    image.onload = function() { 
        main(); 
       }} 

更換

image.onload = function() { 
       alert("Loaded"); 
      } 

加載第二圖像時，你的函數被調用 然後編輯代碼適合你的ne編輯 我會在一段時間內編輯更多

Answer 3

圖像是異步加載的，所以當您嘗試讀取main文件時，圖像仍在加載。所以你需要等待所有的圖像加載。

window.addEventistener("load", function() { 
    var canvas = document.getElementById('gameCanvas'); 
    var ctx = canvas.getContext('2d'); 

    var images = []; 

    function loadImages(imageFiles, completeFnc) { 
     var loadedImages = [], 
      loadedCnt = 0; 

     for(var i = 0; i < imageFiles.length; i++) { 
      var image = new Image(); 

      image.onload = function() { 
       loadedCnt++; //increment the count 
       if(loadedCnt==imageFiles.length) { //if count equals total, fire off callback 
        completeFnc(); 
       } 
      }; 

      image.onerror = function() { 
       alert("There was a problem loading the images"); 
      }; 

      image.src = imageFiles[i]; 
      loadedImages[i] = image; 
     } 

     return loadedImages; 
    } 

    function init() { 
     images = loadImages(['img/1.png', 'img/2.png'], main);  
    } 

    function main() { 
     ctx.drawImage(images[1], 0,0); 
    } 

    init(); 
}); 

Answer 4

這應該更好地工作

var images = ['img/1.png', 'img/2.png'], loadedImages = [], canvas,ctx, idx=0: 
function main() { 
    ctx.drawImage(images[1], 0, 0); 
} 

function loadImages() { 
    if (loadedImages.length == images.length) { 
    main(); 
    return; 
    } 
    var image = new Image(); 
    image.onload = function() { 
    loadedImages.push(this); 
    loadImages(); 
    idx++; 
    } 
    image.src = imageFiles[idx]; 
} 

function init() { 
    canvas = document.getElementById('gameCanvas'); 
    ctx = canvas.getContext('2d'); 
    loadImages(); 
} 

window.onload = function() { 
    init(); 
} 

Answer 5

使用Promise，無極對象用於遞延和異步計算。 Promise代表尚未完成的操作，但預計在未來。

Promise.all()，的Promise.all(iterable)方法返回解決當所有的迭代器參數的承諾已經解決的承諾。

function loadImages(imageFiles) { 
 
    var promiseArr = []; 
 
    for (var i = 0; i < imageFiles.length; i++) { 
 
    var eachPromise = new Promise(function(resolve, reject) { 
 
     var image = new Image(); 
 
     image.onload = function() { 
 
     alert('Loaded!'); 
 
     resolve(); 
 
     } 
 
     image.src = imageFiles[i]; 
 
    }); 
 
    promiseArr.push(eachPromise); 
 
    } 
 
    return promiseArr; 
 
} 
 

 
function init() { 
 
    var AllImages = ['https://www.google.co.in/logos/doodles/2016/earth-day-2016-5741289212477440.2-5643440998055936-ror.jpg', 'https://www.google.co.in/logos/doodles/2016/earth-day-2016-5741289212477440.3-5700735861784576-ror.jpg']; 
 
    var allPromises = loadImages(AllImages); 
 
    Promise.all(allPromises).then(function() { 
 
    alert('All Loaded'); 
 
    main(); 
 
    }); 
 
} 
 

 
function main() {} 
 
init();