xobs/fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add data-preload attribute for iframes

Browse Source 
Allows lazy-loaded (i.e. data-src) iframes to be preloaded when they
come within the viewDistance, rather than once they're visible.
This commit is contained in:
Max Rothman
2019-03-19 22:28:30 -04:00
parent c7db11d9cf
commit 93b1abc736
2 changed files with 68 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
js/reveal.js
View File

@@ -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 <source> 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 <source> children