img onload 提前执行

Question

我正在开发一个在 canvas 上加载、渲染和刷新图像的系统对于我的 javascript 引擎项目，但是当我使用 img.onload 它在我能够设置 img 源

之前执行

主要功能：

function addImgToList(canvas, url, sw, sh) {
    TempVar = {s: CheckSlots(canvas, 0)
              };
    that = this.TempVar;

    CurrentGFXElements[canvas].images[TempVar.s] = {
        img: new Image(),
        sw: sw,
        sh: sh,
        sprites: [],
        active: true,
        lx: 0, // last x
        ly: 0, // last y
        ew: 0,
        eh: 0,
        animations: 0
    };
    /*error calculations begins before img has been loaded
    */

    CurrentGFXElements[canvas].images[TempVar.s].img.onload = function (TempVar) {
        calcSprites(canvas, TempVar.s, sw, sh);
    } (TempVar);

    //CurrentGFXElements[canvas].images[TempVar.s].img.src = url;

    CurrentGFXElements[canvas].indexList[TempVar.s][0] = 1;
    return TempVar.s;}

注意：我知道设置 src 的那一行被注释掉了

计算函数：

function calcSprites(canvas, slot, sw, sh, height) {
TempVar = {
    h: CurrentGFXElements[canvas].images[slot].img.height,
    w: CurrentGFXElements[canvas].images[slot].img.width,
    x: 0,
    y: 0,
    s: slot
};

TempVar.columns = TempVar.w / sw;
TempVar.rows = TempVar.h / sh;
TempVar.sprites = TempVar.columns * TempVar.rows;

console.log(TempVar);

for (i = 0; i < TempVar.sprites; i++) {
    CurrentGFXElements[canvas].images[slot].sprites[i] = [[TempVar.x, TempVar.y]];
    console.log(CurrentGFXElements[canvas].images[slot].sprites[i]);

    TempVar.x += CurrentGFXElements[canvas].images[slot].sw;

    if (TempVar.x >= (CurrentGFXElements[canvas].images[slot].sw * TempVar.columns)) {
        TempVar.x = 0;
        TempVar.y += CurrentGFXElements[canvas].images[slot].sh;
    }
}

return TempVar;}

可以在此处查看完整文件：（此 link 并非 24/7 全天候运行）（跳过顶部代码的注释部分）

http://preview.47chkdyfg0j54s4iwcuw0aw3py5e9udikcegdc7r578ehfr.box.codeanywhere.com:3000/engine/graphics.js

Answer 1

我发现错误似乎是每当您将参数传递给匿名函数时该函数将自动激活如果您将函数分配给 onload 也会发生这种情况:

//will activate instantly
img.onload = someFunction();

//same as above
img onload = function (argument) {//insert code}(argument_to_pass);

//these will work without problems
img.onload = someFunction; //this one should work but not 100% sure

img.onload = function () {//insert code}

img onload 提前执行

img onload executes early

javascript

image

onload