createImageBitmap only executing after page is reloaded

Question

When I load up my webpage, the createImageBitmap lines don't run and my list of promises is left empty, but when I reload the page, the promises are in the list, and the list seems to have been filled before the function is called. This is causing problems and crashing my game, because the promises aren't there to be resolved into images.

why does this happen, and what can I do to fix it?

here's a modified excerpt of the code:

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

When passing an HTMLImageElement as the source for createImageBitmap(), that element must be in a decoded state, that is its load event must have fired.

It works when you reload the page because you've been lucky, and that the images were loaded fast enough, from the cache.

So you could wait for the load event of all these HTMLImageElements before calling all the createImageBitmap(), or you could refactor your code to make it a bit faster* by fetching all the resources as Blobs, and creating the ImageBitmaps from these Blobs directly, however you'd need to store the images' size in your JS, along with the cropping options.

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)
};

• It won't necessarily be "faster" as in taking less wall-clock time to execute, but it will allow the browser to do less work and optimize other tasks in parallel.