diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2015-05-04 20:58:58 -0400 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2015-05-04 20:58:58 -0400 |
commit | 7dd33f188fe14fd3cfa358aad523410d646c98fb (patch) | |
tree | df101ffa1af79ff77ea3faafc4167a53043c477c /js/reveal.js | |
parent | 152271efb26034c0fe8b898a5cad61939f542c99 (diff) | |
download | fosdem-2018-presentation-7dd33f188fe14fd3cfa358aad523410d646c98fb.tar fosdem-2018-presentation-7dd33f188fe14fd3cfa358aad523410d646c98fb.tar.gz |
lazy-load iframes only for current slide, unload when hidden
Diffstat (limited to 'js/reveal.js')
-rw-r--r-- | js/reveal.js | 24 |
1 files changed, 17 insertions, 7 deletions
diff --git a/js/reveal.js b/js/reveal.js index 79c8bbb..ad99fdc 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2723,7 +2723,7 @@ slide.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 ) { + toArray( slide.querySelectorAll( 'img[data-src]', 'video[data-src]', 'audio[data-src]' ) ).forEach( function( element ) { element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); element.removeAttribute( 'data-src' ); } ); @@ -2909,19 +2909,24 @@ } } ); - // iframe embeds + // Lazy loading iframes + toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( element ) { + element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); + } ); + + // Generic postMessage API for non-lazy loaded iframes toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) { el.contentWindow.postMessage( 'slide:start', '*' ); }); - // YouTube embeds + // YouTube postMessage API toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) { if( el.hasAttribute( 'data-autoplay' ) ) { el.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' ); } }); - // Vimeo embeds + // Vimeo postMessage API toArray( slide.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) { if( el.hasAttribute( 'data-autoplay' ) ) { el.contentWindow.postMessage( '{"method":"play"}', '*' ); @@ -2945,19 +2950,24 @@ } } ); - // iframe embeds + // Lazy loading iframes + toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( element ) { + element.removeAttribute( 'src' ); + } ); + + // Generic postMessage API for non-lazy loaded iframes toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) { el.contentWindow.postMessage( 'slide:stop', '*' ); }); - // YouTube embeds + // YouTube postMessage API toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) { if( !el.hasAttribute( 'data-ignore' ) && typeof el.contentWindow.postMessage === 'function' ) { el.contentWindow.postMessage( '{"event":"command","func":"pauseVideo","args":""}', '*' ); } }); - // Vimeo embeds + // Vimeo postMessage API toArray( slide.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) { if( !el.hasAttribute( 'data-ignore' ) && typeof el.contentWindow.postMessage === 'function' ) { el.contentWindow.postMessage( '{"method":"pause"}', '*' ); |