javascript

Question

我在数组中预加载图像以便稍后在 canvas（例如 2D 自上而下的游戏板）上绘制时遇到了一些麻烦。但是，似乎其中一张图片（灰度 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

解决方案：永远不要使用十六进制，因为数字 AD 会被 Adblockers 屏蔽。

感谢 Philip 发现了这一点。

javascript - 数组中的一张图片未加载

javascript - One image in an array is not loading

arrays

image

preload