Здравствуйте. Пишу класс анимации спрайт листа. Как можно засунуть в класс проверку на загрузку картинки, что бы она отрисовывалась. я придумал только так.
let canvas = document.getElementById("canvas");
let arab = new Image();
arab.src = "./img/arab-sprite.png";
arab.onload = function () {
class Character {
constructor(options) {
this.ctx = options.ctx;
this.image = options.image;
this.width = options.width;
this.height = options.height;
this.render();
}
load(){}
render() {
this.ctx.drawImage(
this.image,
0,
0,
this.width / 7,
this.height,
0,
0,
this.width / 7,
this.height
);
}
}
const arabCharacter = new Character({
ctx: canvas.getContext("2d"),
image: arab,
width: 448,
height: 60,
});
}
Но это выглядит плохо, пришлось по загрузки картинки обернуть весь код в анонимную функцию.
Подскажите как добавить функцию в класс которая сама будет проверять загрузку картинки/картинок асинхронно и только потом происходит отрисовка drawImage в методе render() и все будет инкапсулировано под капотом. Спасибо.