javascript - One image in an array is not loading

Question

I'm having a bit of trouble when preloading images in an array to later be drawn on a canvas (like a 2D top-down game board). However, it seems like one of these images (Greyscale GIFs, btw) refuses to load. I know it is one because when using an example from somewhere to count down the remaining images, it stops if set to 256, but will continue if set to 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 = "";
}

Any ideas why this is happening? Been reuploading the same GIF over and over (imgad.gif).

Answer 1

Because the image file name is imgad.gif, most AdBlockers block it, because of the ad part.... Renaming the image should solve it.