From 93b1abc7364eacb028c30f145603d0a155f2fcbd Mon Sep 17 00:00:00 2001 From: Max Rothman Date: Tue, 19 Mar 2019 22:28:30 -0400 Subject: Add data-preload attribute for iframes Allows lazy-loaded (i.e. data-src) iframes to be preloaded when they come within the viewDistance, rather than once they're visible. --- js/reveal.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 47 insertions(+), 7 deletions(-) (limited to 'js/reveal.js') diff --git a/js/reveal.js b/js/reveal.js index 387077a..662679b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3671,6 +3671,26 @@ } + /** + * Should the given element be preloaded? + * Decides based on local element attributes and global config. + * + * @param {HTMLElement} element + */ + function shouldPreload(element) { + + // Prefer an explicit global preload setting + var preload = config.preloadIframes; + + // If no global setting is available, fall back on the element's + // own preload setting + if( typeof preload !== 'boolean' ) { + preload = element.hasAttribute( 'data-preload' ); + } + + return preload; + } + /** * Called when the given slide is within the configured view * distance. Shows the slide element and loads any content @@ -3686,10 +3706,20 @@ slide.style.display = config.display; // Media elements with data-src attributes - toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src]' ) ).forEach( function( element ) { - element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); - element.setAttribute( 'data-lazy-loaded', '' ); - element.removeAttribute( 'data-src' ); + 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); + } } ); // Media elements with children @@ -3807,9 +3837,19 @@ } // Reset lazy-loaded media elements with src attributes - toArray( slide.querySelectorAll( 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src]' ) ).forEach( function( element ) { - element.setAttribute( 'data-src', element.getAttribute( 'src' ) ); - element.removeAttribute( 'src' ); + 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); + } } ); // Reset lazy-loaded media elements with children -- cgit v1.2.3