commit da6c87dd4bbbc3d62af24fcd50015e80386d3673
author airnan <hernantorrisi@gmail.com> Mon Dec 07 20:36:21 2020 -0500
committer airnan <hernantorrisi@gmail.com> Mon Dec 07 20:36:21 2020 -0500
tree 81fb6d776e9d9449156f48cd8e009ef954e4e051
parent b5ecceefce65edb5cac70b2cc830b444a3030954

fixes #2362 loaded event fired in safari

player/js/animation/AnimationItem.js

diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 2d29d8a..60a978e 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -49,7 +49,7 @@
             this.renderer = new HybridRenderer(this, params.rendererSettings);
             break;
     }
-    this.imagePreloader.setCacheType(animType);
+    this.imagePreloader.setCacheType(animType, this.renderer.globalData.defs);
     this.renderer.setProjectInterface(this.projectInterface);
     this.animType = animType;
     if (params.loop === ''

player/js/utils/imagePreloader.js

diff --git a/player/js/utils/imagePreloader.js b/player/js/utils/imagePreloader.js
index b3afb2d..1dc2790 100644
--- a/player/js/utils/imagePreloader.js
+++ b/player/js/utils/imagePreloader.js
@@ -37,15 +37,32 @@
         return path;
     }
 
+    function testImageLoaded(img) {
+        var _count = 0;
+        var intervalId = setInterval(function() {
+            var box = img.getBBox();
+            if (box.width || _count > 500) {
+                this._imageLoaded();
+                clearInterval(intervalId);
+            }
+            _count += 1;
+        }.bind(this), 50)
+    }
+
     function createImageData(assetData) {
         var path = getAssetsPath(assetData, this.assetsPath, this.path);
         var img = createNS('image');
-        img.addEventListener('load', this._imageLoaded, false);
+        if (isSafari) {
+            this.testImageLoaded(img)
+        } else {
+            img.addEventListener('load', this._imageLoaded, false);
+        }
         img.addEventListener('error', function() {
             ob.img = proxyImage;
             this._imageLoaded();
         }.bind(this), false);
         img.setAttributeNS('http://www.w3.org/1999/xlink','href', path);
+        this._elementHelper.append(img);
         var ob = {
             img: img,
             assetData: assetData
@@ -108,8 +125,9 @@
         return this.totalImages === this.loadedAssets;
     }
 
-    function setCacheType(type) {
+    function setCacheType(type, elementHelper) {
         if (type === 'svg') {
+            this._elementHelper = elementHelper;
             this._createImageData = this.createImageData.bind(this);
         } else {
             this._createImageData = this.createImgData.bind(this);
@@ -118,6 +136,7 @@
 
     function ImagePreloader(type){
         this._imageLoaded = imageLoaded.bind(this);
+        this.testImageLoaded = testImageLoaded.bind(this);
         this.assetsPath = '';
         this.path = '';
         this.totalImages = 0;