/ src / ImageManager.ts
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  }