Почему canvas не принимает динамические src?

Question

[TonyStark1337]

Почему canvas не принимает динамические src, есть такой код

var canvas = document.getElementById("myCanvas"), 
                context = canvas.getContext("2d");
                 contextT = canvas.getContext("2d");
      var img = new Image();
      var imgflag_1 = new Image();
	  var imgflag_2 = new Image();
	  var imgflag_3 = new Image();
	  var imgflag_4 = new Image();
	  var imgUSER = new Image();
      var loaded = 0;
      img.src = "img/testimage.png";

	  var testingURL = "minCountry/"+arr[a[0]]+".png";
           imgflag_1.src = testingURL; 
	  console.log("link   "+testingURL); // тут выводится как надо, но фото не отображается на холсте 
          
	  imgflag_2.src = "minCountry/American.png";
	  imgflag_3.src = "minCountry/American.png";
	  imgflag_4.src = "minCountry/American.png";
	  imgUSER.src = "img-user.jpg";
      imgflag_1.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
	        imgflag_2.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
	        imgflag_3.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
	        imgflag_4.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
	  imgUSER.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
      img.onload = function() {
      	if(++loaded == 2)
        	draw();
      };
      
      function draw(){
              
        context.drawImage(img, 0, 0);  
		context.drawImage(imgflag_1, 515, 162,110,110);
		context.drawImage(imgflag_2, 515, 275,110,110);
		context.drawImage(imgflag_3, 515, 385,110,110);
		context.drawImage(imgflag_4, 515, 500,110,110);
		context.drawImage(imgUSER, 15, 160,400,400);
}

Если сделать так то работает
imgflag_1.src = "minCountry/American.png";
Если так то не работает, проверял через console.log значение пишется нормально в переменную, массив тоже виден

var testingURL = "minCountry/"+arr[a[0]]+".png";
           imgflag_1.src = testingURL;

Иногда если перезагрузить страницу много раз срабатывает нормально

Answer 1

[Александр]

А где определение массива arr и что такое a?

Comments

[TonyStark1337]

в массиве arr название картинок, в \\а\\ нужные индексы для выбора из массива arr

[Александр]

TonyStark1337, А почему в примере нету?

[TonyStark1337]

Александр, он не важен, суть проблемы в том что что то работает бысрее другово

Answer 2

[twobomb]

Когда-то чёто писал

function loadResources(arr,func){//функция загрузки внешних ресурсов(картинок) arr - массив ссылок, func - функция которая вызовется после загрузки всех ресурсов
  var loadStatus = false;
    loadStatus = {count: arr.length, loaded: 0, percent: 0};//count - общее количество ресурсов, loaded - сколько загружено ресурсов, percent сколько загружено в процентах
    for(var i = 0; i < arr.length; i++){
      var tmp = new Image();
      tmp.src = arr[i];
      tmp.onload = function(){
        loadStatus.loaded++;
        loadStatus.percent = (loadStatus.loaded * 100)/loadStatus.count;
        if(loadStatus.loaded >= loadStatus.count)
          func();
      }	
     }
  return loadStatus;  
 }

Пример
loadResources(["/img/1.jpg","/img/2.jpg"],draw)

Comments

[TonyStark1337]

ваш код тоже срабатывает через раз

[TonyStark1337]

И если делать 3-4 перезагрузки страницы она зависает

[twobomb]

TonyStark1337, значит проблема в вашем коде

[TonyStark1337]

twobomb, зависает и за вашей функций

[twobomb]

TonyStark1337, Из-за моей функции, зависать никак не может. Проблема в вашем коде! Зависание это значит бесконечный цикл, значит вы где то накосячили