I'm encountering a challenge while trying to preload images in an array for later use in drawing on a canvas, such as in a 2D top-down game board. Interestingly, one of these images (which are Greyscale GIFs, by the way) refuses to load. It's evident because when I use a certain example to track the number of remaining images, it stops at 256 but continues 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 insights on why this issue is occurring? I've been repeatedly reuploading the same GIF file (imgad.gif) without success.