lazy-load support for audio #793

This commit is contained in:
Hakim El Hattab 2014-04-22 16:10:08 +02:00
parent 3ad0d6adc0
commit 73f96f1d28
3 changed files with 7 additions and 13 deletions

View file

@ -2173,25 +2173,25 @@ var Reveal = (function(){
function loadSlide( slide ) { function loadSlide( slide ) {
// Media elements with data-src attributes // Media elements with data-src attributes
toArray( slide.querySelectorAll( 'img[data-src], video[data-src]' ) ).forEach( function( element ) { toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src]' ) ).forEach( function( element ) {
element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
element.removeAttribute( 'data-src' ); element.removeAttribute( 'data-src' );
} ); } );
// Video elements with multiple <source>s // Media elements with multiple <source>s
toArray( slide.querySelectorAll( 'video' ) ).forEach( function( video ) { toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( media ) {
var sources = 0; var sources = 0;
toArray( slide.querySelectorAll( 'source[data-src]' ) ).forEach( function( source ) { toArray( media.querySelectorAll( 'source[data-src]' ) ).forEach( function( source ) {
source.setAttribute( 'src', source.getAttribute( 'data-src' ) ); source.setAttribute( 'src', source.getAttribute( 'data-src' ) );
source.removeAttribute( 'data-src' ); source.removeAttribute( 'data-src' );
sources += 1; sources += 1;
} ); } );
// If we rewrote sources for this video, we need to manually // If we rewrote sources for this video/audio element, we need
// tell it to load from its new origin // to manually tell it to load from its new origin
if( sources > 0 ) { if( sources > 0 ) {
video.load(); media.load();
} }
} ); } );

View file

@ -22,10 +22,6 @@
<section> <section>
<h1>1</h1> <h1>1</h1>
<img data-src="fake-url.png"> <img data-src="fake-url.png">
<video>
<source data-src="fake-url.mp4" />
<source data-src="fake-url.webm" />
</video>
</section> </section>
<section> <section>

View file

@ -456,8 +456,6 @@ Reveal.addEventListener( 'ready', function() {
test( 'img with data-src', function() { test( 'img with data-src', function() {
strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' ); strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
strictEqual( document.querySelectorAll( '.reveal section video source[src]' ).length, 2, 'Video sources have been set' );
}); });