lazy load all slide backgrounds

edit
Hakim El Hattab 2014-04-27 15:39:11 +02:00
parent 0140a15bae
commit 7158c12eff
3 changed files with 25 additions and 0 deletions

View File

@ -1337,6 +1337,7 @@ body {
perspective: 600px; perspective: 600px;
} }
.reveal .slide-background { .reveal .slide-background {
display: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1352,6 +1353,11 @@ body {
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -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); transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
} }
.reveal .slide-background.stack {
display: block;
}
.reveal .slide-background.present { .reveal .slide-background.present {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;

View File

@ -528,6 +528,8 @@ var Reveal = (function(){
createBackground( slidev, backgroundStack ); createBackground( slidev, backgroundStack );
} }
backgroundStack.classList.add( 'stack' );
} ); } );
} ); } );
@ -2279,8 +2281,14 @@ var Reveal = (function(){
*/ */
function showSlide( slide ) { function showSlide( slide ) {
// Show the slide element
slide.style.display = 'block'; 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 // Media elements with data-src attributes
toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ) ).forEach( function( element ) { 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' ) ); element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
@ -2312,8 +2320,14 @@ var Reveal = (function(){
*/ */
function hideSlide( slide ) { function hideSlide( slide ) {
// Hide the slide element
slide.style.display = 'none'; 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 // Now that we know which the horizontal slide is, get its index
h = Math.max( horizontalSlides.indexOf( slideh ), 0 ); 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 this is a vertical slide, grab the vertical index
if( isVertical ) { if( isVertical ) {
v = Math.max( toArray( slide.parentNode.querySelectorAll( 'section' ) ).indexOf( slide ), 0 ); v = Math.max( toArray( slide.parentNode.querySelectorAll( 'section' ) ).indexOf( slide ), 0 );

View File

@ -101,6 +101,8 @@ Reveal.addEventListener( 'ready', function() {
strictEqual( Reveal.getIndices().v, 2, 'v 2' ); strictEqual( Reveal.getIndices().v, 2, 'v 2' );
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( Reveal.getIndices().h, 0, 'h 0' );
strictEqual( Reveal.getIndices().v, 0, 'v 0' );
}); });
test( 'Reveal.getSlide', function() { test( 'Reveal.getSlide', function() {