javascript - одно изображение в массиве не загружается

Question

У меня возникают проблемы при предварительной загрузке изображений в массиве, которые позже будут рисоваться на холсте (например, в 2D сверху вниз игровая доска). Однако, похоже, одно из этих изображений (Greyscale GIF, btw) отказывается загружать. Я знаю, что это один, потому что при использовании пример где-то отсчитывать оставшиеся изображения, он останавливается, если установлено 256, но будет продолжаться, если установлено 255.

var xhttp = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP"); 
var xmlDoc; 
var canvas = document.getElementById("leveldraw"); 
var displayLevel = document.getElementById("leveldisp"); 
var levelList = document.getElementById("level"); 
var setlayer1 = document.getElementById("layer1"); 
var setlayer2 = document.getElementById("layer2"); 
var setlayer3 = document.getElementById("layer3"); 
var setlayer4 = document.getElementById("layer4"); 
var setmarkings = document.getElementById("marks"); 
var objects = []; 

xhttp.onreadystatechange = function() 
{ 
    if (xhttp.readyState == 4 && xhttp.status == 200) 
    { 
     xmlDoc = xhttp.responseXML; 
     preloadImages() 
    } 
}; 
xhttp.open("GET", "levels.xml", true); 
xhttp.send(); 

if(canvas.getContext) 
{ 
    var ctx = canvas.getContext("2d"); 
} 

function preloadImages() 
{ 
    var img; 
    var remaining = 256; 
    for(var i=0; i<256; i=i+1) 
    { 
     img = new Image(); 
     img.onload = function() 
     { 
      --remaining; 
      document.getElementById("loader").innerHTML = "<b>Loading: " + parseInt((1-(remaining/256))*100) + "%</b>"; 
      if(remaining<=0) 
      { 
       ChangeLevel(); 
      } 
     }; 
     img.src = "objects/img" + ("00" + i.toString(16)).slice(-2) + ".gif"; 
     objects.push(img); 
    } 
} 

function ChangeLevel() 
{ 
    document.getElementById("loader").innerHTML = "<b>Loading...</b>"; 
    var levelnumber = levelList.selectedIndex; 
    var width=xmlDoc.getElementsByTagName("width")[levelnumber].childNodes[0].nodeValue; 
    var height=xmlDoc.getElementsByTagName("height")[levelnumber].childNodes[0].nodeValue; 
    var layout=xmlDoc.getElementsByTagName("layout")[levelnumber].childNodes[0].nodeValue; 
    var type=xmlDoc.getElementsByTagName("type")[levelnumber].childNodes[0].nodeValue; 
    var layer0data=xmlDoc.getElementsByTagName("layer0")[levelnumber].childNodes[0].nodeValue; 
    var layer1data=xmlDoc.getElementsByTagName("layer1")[levelnumber].childNodes[0].nodeValue; 
    var layer2data=xmlDoc.getElementsByTagName("layer2")[levelnumber].childNodes[0].nodeValue; 
    var layer3data=xmlDoc.getElementsByTagName("layer3")[levelnumber].childNodes[0].nodeValue; 
    canvas.width=width*16; 
    canvas.height=height*16; 
    ctx.fillStyle = "#FFFFFF"; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 
    if(layer1.checked==true) 
    { 
     console.log("layer1"); 
     var i=1; 
     for(var y=0; y<height; y=y+1) 
     { 
      for(var x=0; x<width; x=x+1) 
      { 
       try { 
        ctx.drawImage(objects[parseInt(layer0data.substring(i,i+2),16)],x*16,y*16); 
       } catch(err) { 
        console.log(err.message + " at " + ("00" + x).slice(-2) + "x" + ("00" + y).slice(-2) + " obj:" + layer0data.substring(i,i+2)); 
       } 
       i=i+2; 
      } 
     } 
    } 
    if(layer2.checked==true) 
    { 
     console.log("layer2"); 
     var i=1; 
     for(var y=0; y<height; y=y+1) 
     { 
      for(var x=0; x<width; x=x+1) 
      { 
       try { 
        ctx.drawImage(objects[parseInt(layer1data.substring(i,i+2),16)],x*16,y*16); 
       } catch(err) { 
        console.log(err.message + " at " + ("00" + x).slice(-2) + "x" + ("00" + y).slice(-2) + " obj:" + layer1data.substring(i,i+2)); 
       } 
       i=i+2; 
      } 
     } 
    } 
    if(layer3.checked==true) 
    { 
     console.log("layer3"); 
     var i=1; 
     for(var y=0; y<height; y=y+1) 
     { 
      for(var x=0; x<width; x=x+1) 
      { 
       try { 
        ctx.drawImage(objects[parseInt(layer2data.substring(i,i+2),16)],x*16,y*16); 
       } catch(err) { 
        console.log(err.message + " at " + ("00" + x).slice(-2) + "x" + ("00" + y).slice(-2) + " obj:" + layer2data.substring(i,i+2)); 
       } 
       i=i+2; 
      } 
     } 
    } 
    if(layer4.checked==true) 
    { 
     console.log("layer4"); 
     var i=1; 
     for(var y=0; y<height; y=y+1) 
     { 
      for(var x=0; x<width; x=x+1) 
      { 
       try { 
        ctx.drawImage(objects[parseInt(layer3data.substring(i,i+2),16)],x*16,y*16); 
       } catch(err) { 
        console.log(err.message + " at " + ("00" + x).slice(-2) + "x" + ("00" + y).slice(-2) + " obj:" + layer3data.substring(i,i+2)); 
       } 
       i=i+2; 
      } 
     } 
    } 
    document.getElementById("loader").innerHTML = ""; 
} 

Любые идеи, почему это происходит? Перезагружал один и тот же GIF снова и снова (imgad.gif).

Answer 1

Поскольку имя файла изображения imgad.gif, большинство AdBlockers блокируют его, из-за части ad .... Переименование изображения должно решить проблему.

Answer 2

РЕШЕНИЕ: Никогда не используйте hexadecimals, так как число AD может быть заблокировано Adblockers.

Спасибо Филиппу за это.