images with data-src attribute are now lazy-loaded #793

index.html

@@ -71,7 +71,7 @@
 							try pressing <a href="#" class="navigate-down">down</a>.
 						</p>
 						<a href="#" class="navigate-down">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 						</a>
 					</section>
 					<section>
@@ -82,14 +82,14 @@
 						<h2>Basement Level 2</h2>
 						<p>Cornify</p>
 						<a class="test" href="http://cornify.com">
-							<img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
+							<img width="280" height="326" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
 						</a>
 					</section>
 					<section>
 						<h2>Basement Level 3</h2>
 						<p>That's it, time to go back up.</p>
 						<a href="#/2">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
+							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
 						</a>
 					</section>
 				</section>
@@ -245,7 +245,7 @@ Reveal.addEventListener( 'customevent', function() {
 							Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
 						</p>
 						<a href="#" class="navigate-down">
-							<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 						</a>
 					</section>
 					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
@@ -346,7 +346,7 @@ function linkify( selector ) {
 				<section>
 					<h2>Spectacular image!</h2>
 					<a href="http://lab.hakim.se/meny/" target="_blank">
-						<img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
+						<img width="320" height="299" data-src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
 					</a>
 				</section>
 

js/reveal.js

@@ -1905,6 +1905,11 @@ var Reveal = (function(){
 				viewDistance = isOverview() ? 6 : 1;
 			}
 
+			// Limit view distance on weaker devices
+			if( isPrintingPDF() ) {
+				viewDistance = Number.MAX_VALUE;
+			}
+
 			for( var x = 0; x < horizontalSlidesLength; x++ ) {
 				var horizontalSlide = horizontalSlides[x];
 
@@ -1915,7 +1920,13 @@ var Reveal = (function(){
 				distanceX = Math.abs( ( indexh - x ) % ( horizontalSlidesLength - viewDistance ) ) || 0;
 
 				// Show the horizontal slide if it's within the view distance
-				horizontalSlide.style.display = distanceX > viewDistance ? 'none' : 'block';
+				if( distanceX < viewDistance ) {
+					horizontalSlide.style.display = 'block';
+					loadSlide( horizontalSlide );
+				}
+				else {
+					horizontalSlide.style.display = 'none';
+				}
 
 				if( verticalSlidesLength ) {
 
@@ -1926,7 +1937,13 @@ var Reveal = (function(){
 
 						distanceY = x === indexh ? Math.abs( indexv - y ) : Math.abs( y - oy );
 
-						verticalSlide.style.display = ( distanceX + distanceY ) > viewDistance ? 'none' : 'block';
+						if( distanceX + distanceY < viewDistance ) {
+							verticalSlide.style.display = 'block';
+							loadSlide( verticalSlide );
+						}
+						else {
+							verticalSlide.style.display = 'none';
+						}
 					}
 
 				}
@@ -2149,6 +2166,19 @@ var Reveal = (function(){
 
 	}
 
+	/**
+	 * Loads any content that is set to load lazily (data-src)
+	 * inside of the given slide.
+	 */
+	function loadSlide( slide ) {
+
+		toArray( slide.querySelectorAll( 'img[data-src]' ) ).forEach( function( element ) {
+			element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
+			element.removeAttribute( 'data-src' );
+		} );
+
+	}
+
 	/**
 	 * Determine what available routes there are for navigation.
 	 *