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事件必须被触发。

当你重新加载页面时，它会工作，因为你很幸运，并且图像从缓存中加载得足够快。

所以你可以等待所有这些HTMLImageElements的load事件之前调用所有的createImageBitmap()，或者你可以重构你的代码，使它快一点*通过获取所有的资源blob，并创建ImageBitmaps从这些blob直接，但是你需要存储图像的大小在你的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)
};

• 不一定会"更快"就像花更少的时间来执行一样，但它将允许浏览器做更少的工作并并行优化其他任务。