addEvent 'loaded' when icon is fully loaded

iTowns · Oct 20, 2023 · 95c0244 · 95c0244
1 parent 8bc11d4
commit 95c0244
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/Core/Label.js b/src/Core/Label.js
@@ -100,8 +100,12 @@ class Label extends THREE.Object3D {
                     this.content.classList.add('itowns-stroke-single');
                 }
                 style.applyToHTML(this.content)
-                    .then(() => {
-                        this.icon = this.content.getElementsByClassName('itowns-icon')[0];
+                    .then((icon) => {
+                        if (icon) {
+                            icon.addEventListener('loaded', ()  => {
+                                this.icon = this.content.getElementsByClassName('itowns-icon')[0];
+                            }, { once: true });
+                        }
                     });
             }
         } else {

diff --git a/src/Core/Style.js b/src/Core/Style.js
@@ -639,6 +639,7 @@ class Style {
      * set Style from (geojson-like) properties.
      * @param {object} properties (geojson-like) properties.
      * @param {number} type
+     *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
     setFromGeojsonProperties(properties, type) {
@@ -680,6 +681,7 @@ class Style {
      * @param {Object} sprites vector tile layer.
      * @param {number} [order=0]
      * @param {boolean} [symbolToCircle=false]
+     *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
     setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
@@ -851,6 +853,8 @@ class Style {
      * properties of this style.
      *
      * @param {Element} domElement - The element to set the style to.
+     *
+     * @returns {HTMLImageElement} - The icon
      */
     async applyToHTML(domElement) {
         if (arguments.length > 1) {
@@ -942,13 +946,14 @@ class Style {
 
             cIcon.style['z-index'] = -1;
             domElement.appendChild(cIcon);
-            icon.removeEventListener('load', addIcon);
+            const event = new Event('loaded');
+            icon.dispatchEvent(event);
         };
 
         if (icon.complete) {
             addIcon();
         } else {
-            icon.addEventListener('load', addIcon);
+            icon.addEventListener('load', addIcon, { once: true });
         }
         return icon;
     }