3 files changed, 56 insertions, 7 deletions
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index d8f8f123e..2ae67d5a6 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -199,6 +199,10 @@ $grid-breakpoint-sm: $mysoc-footer-breakpoint-sm;
 
 @import "mysoc_footer";
 
+html.lazyload .js-lazyload {
+  background-image: none;
+}
+
 .mysoc-footer {
 
   @media print {
@@ -261,14 +265,27 @@ $grid-breakpoint-sm: $mysoc-footer-breakpoint-sm;
 
 .fms-app-badges {
   margin: 1em 0;
-
-  a {
-    text-decoration: none;
+}
+.fms-app-badge {
+  display: inline-block;
+  text-decoration: none;
+  width: 135px;
+  height: 0;
+  padding-top: 40px;
+  background-size: 135px 40px;
+  overflow: hidden;
+  margin-right: 0.5em;
+}
+.fms-app-badge--ios {
+  background-image: url('/cobrands/fixmystreet/images/itunes_store_logo.png');
+  @media ($high-dpi-screen) {
+    background-image: url('/cobrands/fixmystreet/images/itunes_store_logo@2.png');
   }
-
-  img {
-    border: none;
-    margin-right: 0.5em;
+}
+.fms-app-badge--android {
+  background-image: url('/cobrands/fixmystreet/images/google_play_logo.png');
+  @media ($high-dpi-screen) {
+    background-image: url('/cobrands/fixmystreet/images/google_play_logo@2.png');
   }
 }
 
diff --git a/web/cobrands/fixmystreet/header.js b/web/cobrands/fixmystreet/header.js
index e4b0a9a91..103922b08 100644
--- a/web/cobrands/fixmystreet/header.js
+++ b/web/cobrands/fixmystreet/header.js
@@ -8,6 +8,9 @@ var fixmystreet = fixmystreet || {};
     var iel8 = E.className.indexOf('iel8') > -1;
     var type = Modernizr.mq('(min-width: 48em)') || iel8 ? 'desktop' : 'mobile';
     var meta = D.getElementById('js-meta-data');
+    if ('IntersectionObserver' in window) {
+        E.className += ' lazyload';
+    }
     fixmystreet.page = meta.getAttribute('data-page');
     fixmystreet.cobrand = meta.getAttribute('data-cobrand');
     if (type == 'mobile') {
diff --git a/web/js/lazyload.js b/web/js/lazyload.js
new file mode 100644
index 000000000..50cc8c46e
--- /dev/null
+++ b/web/js/lazyload.js
@@ -0,0 +1,29 @@
+(function(){
+    if (!('IntersectionObserver' in window)) {
+        return;
+    }
+
+    // Now we're here, we can assume quite modern JavaScript!
+
+    const observer = new IntersectionObserver(onIntersection, {
+        rootMargin: "50px 0px"
+    });
+
+    const images = document.querySelectorAll(".js-lazyload");
+    images.forEach(image => {
+        observer.observe(image);
+    });
+
+    function onIntersection(entries, observer) {
+        entries.forEach(entry => {
+            if (entry.intersectionRatio > 0) {
+                // Loading the image is the only thing we care about, so can
+                // stop observing.
+                observer.unobserve(entry.target);
+                // Removing this class (which is suppressing background-image)
+                // will trigger the image load
+                entry.target.classList.remove('js-lazyload');
+            }
+        });
+    }
+})();