lazy load all slide backgrounds

3 files changed, 25 insertions, 0 deletions

diff --git a/css/reveal.css b/css/reveal.css
index 6a8cd4a..d10ff49 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1337,6 +1337,7 @@ body {
 	        perspective: 600px;
 }
 	.reveal .slide-background {
+		display: none;
 		position: absolute;
 		width: 100%;
 		height: 100%;
@@ -1352,6 +1353,11 @@ body {
 		   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 		        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	}
+
+	.reveal .slide-background.stack {
+		display: block;
+	}
+
 	.reveal .slide-background.present {
 		opacity: 1;
 		visibility: visible;
diff --git a/js/reveal.js b/js/reveal.js
index d0c8272..9b03d5a 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -528,6 +528,8 @@ var Reveal = (function(){
 					createBackground( slidev, backgroundStack );
 				}
 
+				backgroundStack.classList.add( 'stack' );
+
 			} );
 
 		} );
@@ -2279,8 +2281,14 @@ var Reveal = (function(){
 	 */
 	function showSlide( slide ) {
 
+		// Show the slide element
 		slide.style.display = 'block';
 
+		// Show the corresponding background element
+		var indices = getIndices( slide );
+		var background = getSlideBackground( indices.h, indices.v );
+		background.style.display = 'block';
+
 		// Media elements with data-src attributes
 		toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ) ).forEach( function( element ) {
 			element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
@@ -2312,8 +2320,14 @@ var Reveal = (function(){
 	 */
 	function hideSlide( slide ) {
 
+		// Hide the slide element
 		slide.style.display = 'none';
 
+		// Hide the corresponding background element
+		var indices = getIndices( slide );
+		var background = getSlideBackground( indices.h, indices.v );
+		background.style.display = 'none';
+
 	}
 
 	/**
@@ -2618,6 +2632,9 @@ var Reveal = (function(){
 			// Now that we know which the horizontal slide is, get its index
 			h = Math.max( horizontalSlides.indexOf( slideh ), 0 );
 
+			// Assume we're not vertical
+			v = 0;
+
 			// If this is a vertical slide, grab the vertical index
 			if( isVertical ) {
 				v = Math.max( toArray( slide.parentNode.querySelectorAll( 'section' ) ).indexOf( slide ), 0 );
diff --git a/test/test.js b/test/test.js
index c34a04a..3bc934f 100644
--- a/test/test.js
+++ b/test/test.js
@@ -101,6 +101,8 @@ Reveal.addEventListener( 'ready', function() {
 		strictEqual( Reveal.getIndices().v, 2, 'v 2' );
 
 		Reveal.slide( 0, 0 );
+		strictEqual( Reveal.getIndices().h, 0, 'h 0' );
+		strictEqual( Reveal.getIndices().v, 0, 'v 0' );
 	});
 
 	test( 'Reveal.getSlide', function() {