perf: Improve Parallax performance

uikit · Sep 25, 2018 · 38be3bc · 38be3bc
1 parent 94874b6
commit 38be3bc
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 - Viewport Height component no longer sets a `height` except for IE  
 - Improve Tooltip performance
+- Improve Parallax performance
 
 ### Removed
 

diff --git a/src/js/components/parallax.js b/src/js/components/parallax.js
@@ -27,27 +27,33 @@ export default {
 
     update: {
 
-        read({percent}) {
+        read({percent, active}, {type}) {
+
+            if (type !== 'scroll') {
+                percent = false;
+            }
+
+            if (!active) {
+                return;
+            }
+
+            const prev = percent;
+            percent = ease(scrolledOver(this.target) / (this.viewport || 1), this.easing);
+
             return {
-                prev: percent,
-                percent: ease(scrolledOver(this.target) / (this.viewport || 1), this.easing)
+                percent,
+                style: prev !== percent ? this.getCss(percent) : false
             };
         },
 
-        write({prev, percent, active}, {type}) {
-
-            if (type !== 'scroll') {
-                prev = false;
-            }
+        write({style, active}) {
 
             if (!active) {
                 this.reset();
                 return;
             }
 
-            if (prev !== percent) {
-                css(this.$el, this.getCss(percent));
-            }
+            style && css(this.$el, style);
 
         },
 

diff --git a/src/js/mixin/parallax.js b/src/js/mixin/parallax.js
@@ -111,12 +111,10 @@ export default {
 
             data.active = !this.media || window.matchMedia(this.media).matches;
 
-            if (data.image) {
-                data.image.dimEl = {
-                    width: this.$el.offsetWidth,
-                    height: this.$el.offsetHeight
-                };
-            }
+            data.dimEl = {
+                width: this.$el.offsetWidth,
+                height: this.$el.offsetHeight
+            };
 
             if ('image' in data || !this.covers || !this.bgProps.length) {
                 return;
@@ -128,22 +126,18 @@ export default {
                 return;
             }
 
-            data.image = false;
-
-            getImage(src).then(img => {
-                data.image = {
-                    width: img.naturalWidth,
-                    height: img.naturalHeight
-                };
-
-                this.$emit();
-            });
+            const img = new Image();
+            img.src = src;
+            data.image = img;
 
+            if (!img.naturalWidth) {
+                getImage(src).then(() => this.$emit());
+            }
         },
 
-        write({image, active}) {
+        write({dimEl, image, active}) {
 
-            if (!image) {
+            if (!image || !image.naturalWidth) {
                 return;
             }
 
@@ -152,9 +146,12 @@ export default {
                 return;
             }
 
-            const {dimEl} = image;
+            const imageDim = {
+                width: image.naturalWidth,
+                height: image.naturalHeight
+            };
 
-            let dim = Dimensions.cover(image, dimEl);
+            let dim = Dimensions.cover(imageDim, dimEl);
 
             this.bgProps.forEach(prop => {
 
@@ -177,7 +174,7 @@ export default {
                     }
                 }
 
-                dim = Dimensions.cover(image, dimEl);
+                dim = Dimensions.cover(imageDim, dimEl);
             });
 
             css(this.$el, {