Only load iframes once they're visible

This fixes an annoying UX issue where clicking a jump link in the sidebar wouldn't take you to the correct location since the act of scrolling would load all previous component iframes.

Now, iframes are only loaded if they're visible in the viewport (for at least 100ms, the default setting of in-view.js)

src/assets/js/app.js

@@ -60,8 +60,7 @@
 
 		// Lazy-loaded iframes
 		lazyframe('[lazyframe]', {
-			lazyload: true,
-			debounce: 50,
+			lazyload: false,
 			onAppend: function(iframe) {
 				// delay the iFrameResize call to allow the iframeResizer.contentWindow.min.js script
 				// to load in the iframe first
@@ -76,6 +75,11 @@
 			},
 		});
 
+		// Only loads iframes once they're visible
+		inView('[lazyframe]').on('enter', function(elem) {
+			$(elem).click();
+		});
+
 		// Prefixes all section links with the element name
 		$('.i-library').each(function() {
 			var $library = $(this);

src/templates/index.handlebars

@@ -65,6 +65,7 @@
 		<script src="_stylemark/js/vendor/lazyframe.min.js"></script>
 		<script src="_stylemark/js/vendor/highlight.min.js"></script>
 		<script src="_stylemark/js/vendor/clipboard.min.js"></script>
+		<script src="_stylemark/js/vendor/in-view.min.js"></script>
 		<script src="_stylemark/js/app.js"></script>
 
 		{{#each options.theme.js}}