JavaScript图像仅在刷新时加载

我目前正在努力解决我的游戏引擎上一个非常恼人的问题。。。 我不明白为什么在第一次加载页面时没有加载图像，为了使这项工作正常，我必须刷新它。 以下是我当前的代码：

纹理创建：

/**
 * @param {GLContext} context Context
 * @param {boolean} clamp Clamp
 * @param {Integer} filter Filter
 */
this.create = function(filename, context, filter, clamp) {    
    this.filename = filename;
    this.context = context;

    var gl = context.GL;

    this.id = gl.createTexture();
    this.id.image = new Image();
    var _this = this;

    this.id.image.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, _this.id);

        gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
        gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);

        if (clamp) {
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        } else {
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
        }

        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this);

        gl.bindTexture(gl.TEXTURE_2D, null);
        loaded = true;

    };
    this.id.image.src = filename;

    // ...
};

资源加载：

/**
 * Load all texture resources
 */
this.loadTextureResources = function() {
    for (var key in queue) {
        var i = queue[key];
        var tmpt = new Texture();               
        tmpt.create(i.filename, context, i.filter, i.clamp);
        this.resources[key] = tmpt;
    }
};

和游戏初始化：

/**
 * Start game
 */
this.start = function() {
    this.loadTextureResources();

    tree.create();
    if (typeof this.oncreate === "function") this.oncreate();

    setTimeout(this.gameloop, 500);
};

您还可以看到演示和

（我试着尽我所能，花了3天时间试图解决这个问题……）

---

提前感谢…

在所有现代web浏览器中，为了提高速度，图像以异步方式加载。因此，只有在页面刷新后，您的图像才能足够早地加载，因为它们已经被缓存

首先尝试缓存图像，只有在缓存后，才会触发其余的逻辑

一旦图像缓存到浏览器中，下次使用图像时，加载速度会快得多

要缓存图像，只需将其加载到浏览器中

您可以像这样缓存图像：

function cacheImages(array)
{
    if (!cacheImages.list) {
        cacheImages.list = [];
    }
    var list = cacheImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        }
        list.push(img);
        img.src = array[i];
    }
}

cacheImages(["url1.jpg", "url2.jpg", "url3.jpg"]);

函数缓存图像（数组）
{
如果（！cacheImages.list）{
cacheImages.list=[]；
}
var list=cacheImages.list；
对于（var i=0；i

最终，随着时间的推移，浏览器缓存可能会填满并删除尚未使用的最旧内容

---

因此，建议您始终尝试缓存，因为如果浏览器已经有图像，它将不会再次保存它（如果浏览器足够聪明，通常不会保存重复的图像）。

图像加载是异步的。例如，如果需要几秒钟，则仅在几秒钟后调用映像的“onload”，而当前作用域中的代码将继续执行。你的例子似乎不能解决这个问题。诚然，我没有仔细阅读您的全部示例链接，所以我可能弄错了

最好让某个资源管理器为您处理此问题，并将整个图形初始化包装在一个回调中，该回调仅在加载完所有所需资源后才会调用

第二次这不是问题的原因是图像来自缓存，大多数浏览器（我认为IE是例外）在连接到已加载的资源时直接调用onload处理程序

顺便说一句，如果您有这样的问题，让服务器端的一些重写缓冲区脚本故意延迟响应，以便更好地看到效果。它有助于调试，例如一个简单的PHP脚本执行

sleep（3）然后是文件的传递。当然，也可以使用浏览器的节流功能