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