Improving Performance

public/animation/fade/ElementScrollFader.jsx

@@ -29,22 +29,35 @@ class ElementScrollFader extends React.Component {
 
     this.state = { visible: false };
     this.onScrollBound = this.onScroll.bind(this);
+    this.updateRectangleBound = this.updateRectangle.bind(this);
     this.checkEffectBound = this.checkEffect.bind(this);
+
+    this.rect = null;
   }
 
   componentDidMount() {
+    //Update rectangle
+    if(this.rectTimer) clearInterval(this.rectTimer);
+    this.rectTimer = setInterval(this.updateRectangleBound, 100);
+
     if(!this.initialCheckFunction) {
       this.initialCheckFunction = setTimeout(this.checkEffectBound, 300);
     }
 
     document.addEventListener('scroll', this.onScrollBound, true);
-    document.addEventListener("DOMContentLoaded", this.onScrollBound);
+    document.addEventListener("DOMContentLoaded", this.updateRectangleBound);
   }
 
   componentWillUnmount() {
     this.detachListener();
   }
 
+  //Used for rect calculation
+  updateRectangle() {
+    if(!this.refs || !this.refs.fader) return;
+    this.rect = this.refs.fader.getBoundingClientRect();
+  }
+
   onScroll(e) {
     this.checkEffect();
   }
@@ -52,18 +65,29 @@ class ElementScrollFader extends React.Component {
   //Common functions
   detachListener() {
     document.removeEventListener('scroll', this.onScrollBound);
-    document.removeEventListener("DOMContentLoaded", this.onScrollBound);
+    document.removeEventListener("DOMContentLoaded", this.updateRectangleBound);
+
+    if(this.rectTimer) clearInterval(this.rectTimer);
     if(this.initialCheckFunction) clearTimeout(this.initialCheckFunction);
   }
 
   checkEffect() {
     if(typeof window === typeof undefined) return;
     if(!this.refs || !this.refs.fader) return;
+    if(this.state.visible) return this.detachListener();
+
+    if(!this.rect) this.updateRectangle();
+
     //Get bounds
-    var rect = this.refs.fader.getBoundingClientRect();
+    var rect = this.rect;
+
     //If our top is at least half way UP the page, show
     if(rect.top > window.innerHeight / 1.5) return;
-    this.setState({visible: true});
+
+    this.setState({
+      visible: true
+    });
+
     this.detachListener();//stop Listening
 
     if(this.props.onVisible) {

public/header/Header.jsx

@@ -26,7 +26,7 @@ import Navbar from './../nav/navbar/Navbar';
 
 export default function(props) {
   return (
-    <header>
+    <header role="banner">
       <Navbar />
     </header>
   );

public/image/Image.jsx

@@ -30,7 +30,6 @@ export default class Image extends React.Component {
   }
 
   onLoad(e) {
-    console.log(this.props);
     if(this.props.onLoad) this.props.onLoad(e);
   }
 

public/image/LoadableImage.jsx

@@ -24,6 +24,7 @@
 import React from 'react';
 import Image from './Image';
 import Loader from './../loading/Loader';
+import BoxSizer from './../layout/BoxSizer';
 
 class LoadableImage extends React.Component {
   constructor(props) {
@@ -55,15 +56,20 @@ class LoadableImage extends React.Component {
     p.onLoad = this.onLoad.bind(this);
     let image = <Image {...p} />;
 
-    let loader;
+    let loader,imageSizerDuringLoad;
 
     if(this.state.loading) {
       loader = <Loader />;
+      if(p.width && p.height) {
+        imageSizerDuringLoad = <BoxSizer ratioWidth={p.width} ratioHeight={p.height} />
+      }
     }
 
     return (
       <div className={"o-loadable-image " + (this.state.loading ? "is-loading" : "is-loaded")}>
         { loader }
+        { imageSizerDuringLoad }
+
         <div className="o-loadable-image__image-container">
           { image }
         </div>

public/layout/BoxSizer.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default (props) => {
+  let height = 100;/* Percentage of width */
+
+  //TODO: Add more methods of resizing this box.
+  if(props.ratioWidth && props.ratioHeight) {
+    height = 100 / props.ratioWidth * props.ratioHeight;
+  }
+
+  //Box Sizer
+  return (
+    <div className="o-box-sizer" style={{
+      paddingBottom: height + '%'
+    }} />
+  );
+};

public/page/home/sections/BannerSection.jsx

@@ -39,6 +39,7 @@ export default (props) => {
       height="1200"
       test="true"
       loadable
+      due
     >
       <PageBoundary full>
         <FloatingContentBox position="middle center" size="large" className="u-text-center">

public/styles/index.scss

@@ -61,6 +61,7 @@
 //Objects
 @import './objects/_background.scss';
 @import './objects/_button.scss';
+@import './objects/_box-sizer.scss';
 @import './objects/_content-box.scss';
 @import './objects/_element-scroll-fader.scss';
 @import './objects/_floating-content-box.scss';

public/styles/objects/_box-sizer.scss

@@ -0,0 +1,11 @@
+/*
+ *  Box Sizer
+ *    Simple box that acts like a ratio sizer
+ *
+ *  Version:
+ *    1.0.0 - 2018/08/10
+ */
+.o-box-sizer {
+  width: 100%;
+  /* padding-bottom will be set my JS */
+}

public/styles/objects/_element-scroll-fader.scss

@@ -16,6 +16,7 @@ $o-element-scroll-fader--amount: 15%;
 .o-element-scroll-fader {
   opacity: 0;
   transition: all $o-element-scroll-fader--speed $s-animation--ease-out;
+  will-change: transform;
 
   $amt: $o-element-scroll-fader--amount;//Shorthand
   &.from-top    { @include t-translate-y(-$amt); }