Эх сурвалжийг харах

lazy load all slide backgrounds

Hakim El Hattab 11 жил өмнө
parent
commit
7158c12eff
3 өөрчлөгдсөн 25 нэмэгдсэн , 0 устгасан
  1. 6 0
      css/reveal.css
  2. 17 0
      js/reveal.js
  3. 2 0
      test/test.js

+ 6 - 0
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;

+ 17 - 0
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 );

+ 2 - 0
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() {