Question

又回来问愚蠢的问题......：）

我做了一些功能，一个用于存储图像，一个用于检索，另一个用于检查图像是否已加载。图像存储在如下数组中：

tiles = [ ["ID", "Image Object", "Loaded boolean"] ];

然而，Javascript运行我的代码的顺序令我难以置信。我添加了几个console.log来查看代码中发生了什么，这就是我得到的：

    START
    Storing http://funxion.wippiespace.com/js/mario/question.gif...  
    Storing http://funxion.wippiespace.com/js/mario/wall.gif...  
    Storing http://funxion.wippiespace.com/js/mario/floor.gif...  
    Map.draw initiated  
    Checking if all images are loaded...  
    Amount of tile images = 3  
    Checking [0]  
    [0]: q,[object HTMLImageElement],false is not loaded  
    Images not loaded!  
    http://funxion.wippiespace.com/js/mario/question.gif stored!  
    http://funxion.wippiespace.com/js/mario/wall.gif stored!  
    http://funxion.wippiespace.com/js/mario/floor.gif stored!

我不明白为什么loaded = true是最后一件事。另外，我尝试了一个setTimeout（this.draw，1000）;在Map.prototype.draw中，所以在再次检查allImgLoaded之前会有1秒的延迟，这不起作用。没有加载检查图纸工作正常。此外，调用Start（）。

代码：

    var canvas = document.getElementById("surface");
    var ctx = canvas.getContext("2d");

    function Map()
    {
        this.tiles = [];
    }
    Map.prototype.draw = function(tileid)
    {
        console.log("Map.draw initiated");
        if (!allImgLoaded(this.tiles))
        {
            console.log("Images not loaded!");
        }
        else
        {
            console.log("All good, proceeding.");
            var img = this.getImg(tileid);
            ctx.drawImage(img, 100, 100);
        }
    }
    Map.prototype.storeImg = function(identifier, imgSrc)
    {
        var nextIndex = this.tiles.length;
        var tile = [identifier, new Image(), false];
        tile[1].src = imgSrc;
        console.log("Storing " + imgSrc + "...");
        tile[1].onload = function()
        {
            tile[2] = true;
            console.log(this.src + " stored!");
        }
        this.tiles[nextIndex] = tile;

    }
    Map.prototype.getImg = function(identifier)
    {
        for (var i in this.tiles)
        {
            console.log("Checking index " + i + " for " + identifier + "...");
            if (this.tiles[i][0] === identifier)
            {
                console.log("Found " + this.tiles[i][1] + "! Returning it now.");
                return this.tiles[i][1];
            }
        }
    }

    function allImgLoaded(array)
    {
        console.log("Checking if all images are loaded...");
        console.log("Amount of tile images = " + array.length);
        for (var i in array)
        {
            console.log("Checking ["+i+"]");
            if(array[i][2] === false)
            {
                console.log("["+i+"]: " + array[i] + " is not loaded");
                return false;
            }
        }
        console.log("All loaded!");
        return true;
    }
    function Start()
    {
        console.log("START");
        var mappi = new Map();
        mappi.storeImg("q", "http://funxion.wippiespace.com/js/mario/question.gif");
        mappi.storeImg("w", "http://funxion.wippiespace.com/js/mario/wall.gif");
        mappi.storeImg("f", "http://funxion.wippiespace.com/js/mario/floor.gif");
        mappi.draw("w");
    }

Answer 1

您似乎不明白图像的加载是异步的。当你的其他javascript继续运行时，它会在后台发生。你开始操作，你的其他代码继续运行，一段时间后图像完成加载onload回调函数被调用。

如果要在加载图像后运行操作，则需要从该图像的onload处理程序启动该操作。现在您的代码开始加载所有图像，然后在图像加载完成之前立即调用mappi.draw()。更具体地说，.storeImg()只是开始加载图像。直到一段时间后才能实际加载图像（正如您从console.log()跟踪中看到的那样。

如果你想预先加载一堆图像然后在加载所有图像时触发操作，你可以使用这个答案中的代码：Image preloader javascript that supports events这将开始加载一堆图像然后在它们全部加载时调用回调。然后，您可以从该回调中调用.draw()方法。使用这样的回调是javascript中异步编程的一部分，并且在网络上加载某些东西时需要它（图像，ajax调用等等）。

检查是否所有图像都是在javascript中预加载时的奇怪错误

1 个答案: