Merge pull request #502 from jamstack/zl/lazyiframe

Lazy load the vimeo iframe for improved performance.

Author: zachleat

src/js/lazyiframe.js

@@ -0,0 +1,33 @@
+if( "forEach" in NodeList.prototype ) {
+	function iframeSwitch(el) {
+		if (!("fetch" in window) || "connection" in navigator && navigator.connection.saveData === true) {
+			return;
+		}
+
+		let iframe = document.createElement("iframe");
+		iframe.setAttribute("loading", "lazy");
+		for(let attr of el.attributes) {
+			iframe.setAttribute(attr.name, attr.nodeValue);
+		}
+		el.replaceWith(iframe);
+	}
+
+	if(typeof IntersectionObserver !== "undefined") {
+		var observer = new IntersectionObserver(function(changes) {
+			changes.forEach(function(change) {
+				if(change.isIntersecting) {
+					iframeSwitch(change.target);
+					observer.unobserve(change.target);
+				}
+			});
+		});
+	}
+
+	document.querySelectorAll("div[data-lazyiframe]").forEach(function(element) {
+		if(typeof IntersectionObserver !== "undefined") {
+			observer.observe(element);
+		} else {
+			iframeSwitch(element);
+		}
+	});
+}

src/site/_includes/layouts/base.njk

@@ -95,5 +95,6 @@ ogimage: "/img/og/default-og-image.png"
     <script type="module" src="/js/details-force-state.js"></script>
     <script type="module" src="/js/filter-container.js"></script>
     <script type="module" src="/js/sort-container.js"></script>
+    <script type="module" src="/js/lazyiframe.js"></script>
   </body>
 </html>

src/site/index.njk

@@ -73,7 +73,9 @@ layout: layouts/base.njk
       <a href="https://www.netlify.com/authors/matt-biilmann/">Matt Biilmann</a> took the concept of Jamstack mainstream with his presentation at Smashing Conf 2016. Watch the quintessential introduction to the Jamstack.
     </p>
     <div class="videowrapper mb-8">
-      <iframe loading="lazy" src="https://player.vimeo.com/video/163522126?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen title="Mathias Biilmann Smashing Conf 2016 talk video: The New Front-End Stack"></iframe>
+      <div data-lazyiframe src="https://player.vimeo.com/video/163522126?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen title="Mathias Biilmann Smashing Conf 2016 talk video: The New Front-End Stack">
+        <a href="https://vimeo.com/163522126">Watch <em>Mathias Biilmann Smashing Conf 2016 talk video: The New Front-End Stack</em> on Vimeo</a>
+      </div>
     </div>
     <a href="/resources/" class="cta">See more videos and resources</a>
   </div>