ImageManager.ts
1 /** 2 * Gestion du chargement des images. 3 * 4 * Fonctionnement : 5 * 6 * ``` 7 * const images = { 8 * 'image1': 'image1.png', 9 * 'image2': 'image2.png', 10 * // ... 11 * }) 12 * 13 * const imagesLoader = ImageManager.load('assets/img/', images) 14 * 15 * Promise.all(imagesLoader).then(() => { 16 * // code 17 * }) 18 * ``` 19 * 20 * Note : la classe est « statique » car c'est le seul moyen de pouvoir charger 21 * une image depuis n'importe où sans avoir à passer un objet partout. 22 */ 23 export class ImageManager { 24 // Images chargées 25 private static readonly images: { [key: string]: HTMLImageElement } = {} 26 27 // Obtenir une image par son nom 28 public static getImage(name: string): HTMLImageElement { 29 return ImageManager.images[name] 30 } 31 32 // Exécute le chargement des images 33 public static load(images: { [key: string]: string }): Array<Promise<HTMLImageElement>> { 34 const promises = new Array<Promise<HTMLImageElement>>() 35 36 for (const [ name, url ] of Object.entries(images)) { 37 const img = document.createElement('img') 38 39 const promise = new Promise<HTMLImageElement>((resolve, reject) => { 40 img.addEventListener('load', () => { 41 ImageManager.images[name] = img 42 resolve(img) 43 }) 44 45 img.addEventListener('error', (e) => { 46 console.error(e) 47 48 reject(`Impossible de charger l'image « ${url} »`) 49 }) 50 }) 51 52 img.src = url 53 54 promises.push(promise) 55 } 56 57 return promises 58 } 59 }