JavaScript图像仅在刷新时加载 [英] JavaScript Image only loads on refresh

问题描述

我目前正在努力解决游戏引擎上一个非常恼人的问题......
我无法弄清楚为什么图片在第一次加载时没有加载，为了使这个工作我必须刷新它。
这是我当前的代码：

I'm currently struggling with a very annoying problem on my game engine... I can't figure out why the images are not loading on the first time the page loads, and to make this work I have to refresh it. Here's my current code:

纹理创建：

/**
 * @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天时间试图解决这个问题......）

(I tried doing pretty much everything I could, and spent 3 days trying to fix this...)

提前致谢...

推荐答案

在所有现代网络浏览器中，为了加快速度，图片会异步加载。因此，只有在页面刷新后，您的图像才会加载得足够早，因为它们已经被缓存。

In all modern web browsers, images load asynchronously, for speed purposes. So only after a page refresh your images are loading early enough because they are already cached.

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

Try to cache your images first, and only after they are cached, trigger the rest of your logic.

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

Once an image has been cached into the browser, it will load much faster the next time it is used.

要缓存图像，您只需将它们加载到浏览器中。

To cache images, all you have to do is load them into the browser.

您可以像这样缓存图像：

You can cache images like this:

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"]);

最终，浏览器缓存可能会填满并删除尚未使用过的最旧的东西。

Eventually over time, the browser cache may fill up and delete the oldest things that haven't been used.

因此，建议您始终尝试缓存，因为如果浏览器已经有图像，则不会再次保存（通常浏览器不保存重复项，如果他们很聪明）。

So, it is recomended that you always try to cache, because if the browser has the image already, it wont save it again (normally browsers do not save duplicates if they are clever enough).

这篇关于JavaScript图像仅在刷新时加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！