From 7158c12effbce8a52c1a6385c1f9ee479c81c9fe Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 27 Apr 2014 15:39:11 +0200 Subject: [PATCH] lazy load all slide backgrounds --- css/reveal.css | 6 ++++++ js/reveal.js | 17 +++++++++++++++++ test/test.js | 2 ++ 3 files changed, 25 insertions(+) diff --git a/css/reveal.css b/css/reveal.css index 6a8cd4a1..d10ff492 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 d0c82722..9b03d5a8 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 c34a04a2..3bc934ff 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() {