createImageBitmap 仅在页面重新加载后执行

Question

当我加载我的网页时，createImageBitmap 行没有运行并且我的承诺列表留空，但是当我重新加载页面时，承诺在列表中，并且列表似乎在调用函数之前已经填充。这导致了问题并使我的游戏崩溃，因为承诺无法解析为图像。

为什么会发生这种情况，我该如何解决？

这是代码的修改摘录：

Spritesheets = {
    tileset_grass : new Image(),
    tileset : new Image(),
    player : new Image(),
    crawler : new Image(),
    creature : new Image(),
    items : new Image(),
    particles : new Image()
};
Spritesheets.tileset_grass.src = "images/tileset_grass.png";
Spritesheets.tileset.src = "images/tileset.png";
Spritesheets.player.src = "images/player.png";
Spritesheets.crawler.src = "images/crawler.png";
Spritesheets.creature.src = "images/creature.png";
Spritesheets.items.src = "images/items.png";
Spritesheets.particles.src = "images/particles.png";

// separates spritesheets into separate sprites
Images = {
    tileset_grass : {
        spriteW : 16,
        spriteH : 18
    },
    tileset : {
        spriteW : 16,
        spriteH : 16
    },
    player : {
        spriteW : 16,
        spriteH : 16
    },
    crawler : {
        spriteW : 16,
        spriteH : 16
    },
    creature : {
        spriteW : 16,
        spriteH : 16
    },
    items : {
        spriteW : 16,
        spriteH : 16
    },
    particles : {
        spriteW : 16,
        spriteH : 16
    },
};

console.log(Images)

function loadSprites() {
    for(let i = 0; i < Object.keys(Images).length; i++) {
        for(let k = 0; k < Spritesheets[Object.keys(Images)[i]].naturalWidth / Images[Object.keys(Images)[i]].spriteW; k++) {
            Images[Object.keys(Images)[i]][k] = createImageBitmap(Spritesheets[Object.keys(Images)[i]], k * Images[Object.keys(Images)[i]].spriteW, 0, Images[Object.keys(Images)[i]].spriteW, Images[Object.keys(Images)[i]].spriteH);
        };
    };
    console.log(Images)
};

loadSprites();

Answer 1

将 HTMLImageElement 作为 createImageBitmap() 的源传递时，该元素必须处于解码状态，即其 load 事件必须已触发。

它在您重新加载页面时起作用，因为您很幸运，并且图像从缓存中加载得足够快。

因此您可以在调用所有 createImageBitmap() 之前等待所有这些 HTMLImageElements 的 load 事件，或者您可以通过获取所有资源来重构您的代码以使其更快* Blob，并直接从这些 Blob 创建 ImageBitmap，但是您需要在 JS 中存储图像的大小以及裁剪选项。

Spritesheets = {
  tileset_grass : "images/tileset_grass.png",
  tileset : "images/tileset.png",
  player : "images/player.png",
  crawler : "images/crawler.png",
  creature : "images/creature.png",
  items : "images/items.png",
  particles : "images/particles.png"
};

// separates spritesheets into separate sprites
Images = {
  tileset_grass : {
    // add the image's width and height info here (or somewhere else)
    width: XXX,
    height: XXX,
    spriteW : 16,
    spriteH : 18
  }
};

async function loadSprites() {
  const keys = Object.keys(Images);
  for(let i = 0; i < keys.length; i++) {
    const key = keys[i];
    // fetch as Blob
    const blob = await fetch(Spritesheets[key]).then(resp => resp.ok && resp.blob());
    const img = Images[key];

    for(let k = 0; k < img.width / img.spriteW; k++) {
      img[k] = await createImageBitmap(blob, k * img.spriteW, 0, img.spriteW, img.spriteH);
    };
  };
  console.log(Images)
};

它不一定会像执行挂钟时间一样“更快”，但它会让浏览器做更少的工作并并行优化其他任务。

createImageBitmap 仅在页面重新加载后执行

createImageBitmap only executing after page is reloaded

javascript

promise

imagebitmap