[fix bug 1004451] Add asset loading for Firefox desktop intro animation

bedrock/firefox/templates/firefox/desktop/includes/intro-anim.html

@@ -1,4 +1,4 @@
-<div class="intro-firefox-logo"></div>
+<img id="intro-firefox-logo" src="{{ media('/img/firefox/desktop/index/animations/firefox-logo.png') }}" alt="">
 <div id="intro-svg-anim">
   <!--[if gt IE 9]><!-->
   <div class="svg-wrapper intro-browser">

media/css/firefox/desktop/intro-anim.less

@@ -20,19 +20,18 @@
         padding-bottom: 140px;
         z-index: 2;
     }
+}
 
-    .intro-firefox-logo {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 512px;
-        height: 532px;
-        margin-top: -256px;
-        margin-left: -256px;
-        opacity: 0;
-        background-image: url(/media/img/firefox/desktop/index/animations/firefox-logo.png);
-    }
+#intro-firefox-logo {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 512px;
+    height: 532px;
+    margin-top: -256px;
+    margin-left: -256px;
+    opacity: 0;
 }
 
 #intro-svg-anim-fallback {
@@ -46,23 +45,21 @@
 }
 
 .svg-anim {
-    #intro {
-        .intro-content {
-            -webkit-animation: fade-in 1s ease-in-out;
-            -webkit-animation-fill-mode: forwards;
-            -webkit-animation-delay: 5.1s;
-            animation: fade-in 1s ease-in-out;
-            animation-fill-mode: forwards;
-            animation-delay: 5.1s;
-        }
+    #intro .intro-content {
+        -webkit-animation: fade-in 1s ease-in-out;
+        -webkit-animation-fill-mode: forwards;
+        -webkit-animation-delay: 5.1s;
+        animation: fade-in 1s ease-in-out;
+        animation-fill-mode: forwards;
+        animation-delay: 5.1s;
+    }
 
-        .intro-firefox-logo {
-            display: block;
-            -webkit-animation: logo-zoom 1.4s ease-in-out;
-            -webkit-animation-fill-mode: forwards;
-            animation: logo-zoom 1.4s ease-in-out;
-            animation-fill-mode: forwards;
-        }
+    #intro-firefox-logo {
+        display: block;
+        -webkit-animation: logo-zoom 1.4s ease-in-out;
+        -webkit-animation-fill-mode: forwards;
+        animation: logo-zoom 1.4s ease-in-out;
+        animation-fill-mode: forwards;
     }
 
     #intro-svg-anim {
@@ -259,9 +256,9 @@
             -webkit-animation: none;
             animation: none;
         }
-        .intro-firefox-logo {
-            display: none;
-        }
+    }
+    #intro-firefox-logo {
+        display: none;
     }
     #intro-svg-anim-fallback {
         display: block;
@@ -1060,14 +1057,14 @@
             display: block;
         }
         #intro {
-            .intro-firefox-logo {
-                display: none;
-            }
             .intro-content {
                 -webkit-animation: none;
                 animation: none;
             }
         }
+        #intro-firefox-logo {
+            display: none;
+        }
     }
 }
 

media/js/firefox/desktop/intro-anim.js

@@ -8,6 +8,7 @@
     var isIE = /MSIE/.test(navigator.userAgent);
     var isTrident = /Trident/.test(navigator.userAgent);
     var isOldOpera= /Presto/.test(navigator.userAgent);
+    var $logo = $('#intro-firefox-logo');
 
     function supportsInlineSVG () {
         var div = document.createElement('div');
@@ -15,12 +16,28 @@
         return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
     }
 
-    setTimeout(function() {
-        if (isIE || isTrident || isOldOpera || !supportsInlineSVG()) {
-            // use fallback browser image
-            $('body').addClass('no-svg-anim');
-        } else {
+    if (isIE || isTrident || isOldOpera || !supportsInlineSVG()) {
+        // use fallback browser image
+        $('body').addClass('no-svg-anim');
+    } else {
+
+        // listen for the load event on Firefox logo image
+        // before starting the animation.
+        $logo.one('load', function () {
             $('body').addClass('svg-anim');
-        }
-    }, 750);
+        }).each(function () {
+            // if the image is already loaded or cached,
+            // call the load event handler.
+            if (this.complete) {
+                $(this).load();
+            }
+        });
+
+        // if there's an error loading the image,
+        // run the animation anyway
+        $logo.one('error', function () {
+            $('body').addClass('svg-anim');
+        });
+    }
+
 })(window.jQuery);