lazy-load support for audio #793
This commit is contained in:
parent
3ad0d6adc0
commit
73f96f1d28
3 changed files with 7 additions and 13 deletions
14
js/reveal.js
14
js/reveal.js
|
@ -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();
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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' );
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue