better defered loading of background media
This commit is contained in:
		
							
								
								
									
										50
									
								
								js/reveal.js
									
									
									
									
									
								
							
							
						
						
									
										50
									
								
								js/reveal.js
									
									
									
									
									
								
							@@ -586,7 +586,7 @@ var Reveal = (function(){
 | 
			
		||||
		if( data.background ) {
 | 
			
		||||
			// Auto-wrap image urls in url(...)
 | 
			
		||||
			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 {
 | 
			
		||||
				element.style.background = data.background;
 | 
			
		||||
@@ -609,24 +609,11 @@ var Reveal = (function(){
 | 
			
		||||
 | 
			
		||||
		// Additional and optional background properties
 | 
			
		||||
		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.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
 | 
			
		||||
		if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
 | 
			
		||||
		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 );
 | 
			
		||||
 | 
			
		||||
		return element;
 | 
			
		||||
@@ -2284,11 +2271,6 @@ var Reveal = (function(){
 | 
			
		||||
		// 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,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 );
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user