diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | js/reveal.js | 39 | ||||
| -rw-r--r-- | test/test-iframes.html | 108 |
3 files changed, 123 insertions, 26 deletions
@@ -316,7 +316,7 @@ Reveal.initialize({ // - false: No media will autoplay, regardless of individual setting autoPlayMedia: null, - // Global override for preloading lazy-loaded iframes + // Global override for preloading lazy-loaded iframes // - null: Iframes with data-src AND data-preload will be loaded when within // the viewDistance, iframes with only data-src will be loaded when visible // - true: All iframes with data-src will be loaded when within the viewDistance diff --git a/js/reveal.js b/js/reveal.js index de12ed7..0437d2d 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -180,6 +180,13 @@ // - false: No media will autoplay, regardless of individual setting autoPlayMedia: null, + // Global override for preloading lazy-loaded iframes + // - null: Iframes with data-src AND data-preload will be loaded when within + // the viewDistance, iframes with only data-src will be loaded when visible + // - true: All iframes with data-src will be loaded when within the viewDistance + // - false: All iframes with data-src will be loaded only when visible + preloadIframes: null, + // Controls automatic progression to the next slide // - 0: Auto-sliding only happens if the data-autoslide HTML attribute // is present on the current slide or fragment @@ -3677,7 +3684,7 @@ * * @param {HTMLElement} element */ - function shouldPreload(element) { + function shouldPreload( element ) { // Prefer an explicit global preload setting var preload = config.preloadIframes; @@ -3707,18 +3714,10 @@ // Media elements with data-src attributes toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ) ).forEach( function( element ) { - var load = function( el ) { - el.setAttribute( 'src', el.getAttribute( 'data-src' ) ); - el.setAttribute( 'data-lazy-loaded', '' ); - el.removeAttribute( 'data-src' ); - }; - - if( element.tagName === 'IFRAME') { - if( shouldPreload(element) ) { - load(element); - } - } else { - load(element); + if( element.tagName !== 'IFRAME' || shouldPreload( element ) ) { + element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); + element.setAttribute( 'data-lazy-loaded', '' ); + element.removeAttribute( 'data-src' ); } } ); @@ -3838,18 +3837,8 @@ // Reset lazy-loaded media elements with src attributes toArray( slide.querySelectorAll( 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src], iframe[data-lazy-loaded][src]' ) ).forEach( function( element ) { - var unload = function( el ) { - el.setAttribute( 'data-src', el.getAttribute( 'src' ) ); - el.removeAttribute( 'src' ); - }; - - if( element.tagName === 'IFRAME' ) { - if( shouldPreload(element) ) { - unload(element); - } - } else { - unload(element); - } + element.setAttribute( 'data-src', element.getAttribute( 'src' ) ); + element.removeAttribute( 'src' ); } ); // Reset lazy-loaded media elements with <source> children diff --git a/test/test-iframes.html b/test/test-iframes.html new file mode 100644 index 0000000..979bb7d --- /dev/null +++ b/test/test-iframes.html @@ -0,0 +1,108 @@ +<!doctype html> +<html lang="en"> + + <head> + <meta charset="utf-8"> + + <title>reveal.js - Test Iframes</title> + + <link rel="stylesheet" href="../css/reveal.css"> + <link rel="stylesheet" href="qunit-2.5.0.css"> + </head> + + <body style="overflow: auto;"> + + <div id="qunit"></div> + <div id="qunit-fixture"></div> + + <div class="reveal" style="display: none;"> + + <div class="slides"> + + <section>1</section> + <section>2</section> + <section> + <iframe class="default-iframe" data-src="#"></iframe> + <iframe class="preload-iframe" data-src="#" data-preload></iframe> + </section> + + </div> + + </div> + + <script src="../js/reveal.js"></script> + <script src="qunit-2.5.0.js"></script> + + <script> + + + Reveal.addEventListener( 'ready', function() { + + var defaultIframe = document.querySelector( '.default-iframe' ), + preloadIframe = document.querySelector( '.preload-iframe' ); + + QUnit.module( 'Iframe' ); + + QUnit.test( 'Using default settings', function( assert ) { + + Reveal.slide(1); + assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' ); + + Reveal.slide(2); + assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); + + Reveal.slide(1); + assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' ); + + }); + + QUnit.test( 'Using data-preload', function( assert ) { + + Reveal.slide(1); + assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); + + Reveal.slide(2); + assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becoems visible' ); + + Reveal.slide(0); + assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'unloads outside of viewDistance' ); + + }); + + QUnit.test( 'Using preloadIframes: true', function( assert ) { + + Reveal.configure({ preloadIframes: true }); + + Reveal.slide(1); + assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); + assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' ); + + Reveal.slide(2); + assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); + assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); + + }); + + QUnit.test( 'Using preloadIframes: false', function( assert ) { + + Reveal.configure({ preloadIframes: false }); + + Reveal.slide(0); + assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' ); + assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' ); + + Reveal.slide(2); + assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); + assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' ); + + }); + + } ); + + Reveal.initialize({ + viewDistance: 2 + }); + </script> + + </body> +</html> |