Question

在预装数组中的图像以便稍后在画布上绘制时（比如2D自上而下的游戏板），我遇到了一些麻烦。但是，似乎这些图像中的一个（Greyscale GIF，顺便说一句）拒绝加载。我知道这是一个因为当使用某个地方的例子倒计算其余图像时，如果设置为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，因此大多数AdBlocker会阻止它，因为ad部分....重命名图像应解决它。

Answer 2

解决方案：永远不要使用十六进制，因为Adblockers可以阻止AD的数量。

感谢菲利普发现了这一点。

javascript - 数组中的一个图像未加载

2 个答案: