dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

better defered loading of background media

This commit is contained in:
Hakim El Hattab 2014-04-27 15:55:57 +02:00
parent 7158c12eff
commit 41e1e013b8
1 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/reveal.js
View File

@ -586,7 +586,7 @@ var Reveal = (function(){
if( data.background ) { if( data.background ) {
// Auto-wrap image urls in url(...) // Auto-wrap image urls in url(...)
if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) { if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
element.style.backgroundImage = 'url('+ data.background +')'; slide.setAttribute( 'data-background-image', 'url('+ data.background +')' );
} }
else { else {
element.style.background = data.background; element.style.background = data.background;
@ -609,24 +609,11 @@ var Reveal = (function(){
// Additional and optional background properties // Additional and optional background properties
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize; if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
if( data.backgroundImage ) element.style.backgroundImage = 'url("' + data.backgroundImage + '")';
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor; if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat; if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition; if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition ); if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
// Create video background element
if( data.backgroundVideo ) {
var video = document.createElement( 'video' );
// Support comma separated lists of video sources
data.backgroundVideo.split( ',' ).forEach( function( source ) {
video.innerHTML += '<source src="'+ source +'">';
} );
element.appendChild( video );
}
container.appendChild( element ); container.appendChild( element );
return element; return element;
@ -2284,11 +2271,6 @@ var Reveal = (function(){
// Show the slide element // 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,6 +2294,36 @@ var Reveal = (function(){
} }
} ); } );
// Show the corresponding background element
var indices = getIndices( slide );
var background = getSlideBackground( indices.h, indices.v );
background.style.display = 'block';
// If the background contains media, load it
if( background.hasAttribute( 'data-loaded' ) === false ) {
background.setAttribute( 'data-loaded', 'true' );
var backgroundImage = slide.getAttribute( 'data-background-image' );
var backgroundVideo = slide.getAttribute( 'data-background-video' );
// Images
if( backgroundImage ) {
background.style.backgroundImage = backgroundImage;
}
// Videos
else if ( backgroundVideo ) {
var video = document.createElement( 'video' );
// Support comma separated lists of video sources
backgroundVideo.split( ',' ).forEach( function( source ) {
video.innerHTML += '<source src="'+ source +'">';
} );
background.appendChild( video );
}
}
} }
/** /**