jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

lazy load support for iframes #793

Browse source
This commit is contained in:
Hakim El Hattab 2014-04-23 15:36:22 +02:00
parent 53238c47ce
commit 54ca9edeed
2 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -295,13 +295,14 @@ Reveal.configure({
### Lazy Loading ### Lazy Loading
When working on presentation with a lot of image, video and audio content it's important to load lazily. Lazy loading means that reveal.js will only load the media for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option. When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.
To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video and audio elements. To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements.
```html ```html
<section> <section>
<img data-src="image.png"> <img data-src="image.png">
<iframe data-src="http://slides.com">
<video> <video>
<source data-src="video.webm" type="video/webm" /> <source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" /> <source data-src="video.mp4" type="video/mp4" />

2
js/reveal.js
View file

@ -2178,7 +2178,7 @@ 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], audio[data-src]' ) ).forEach( function( element ) { toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src], iframe[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' );
} ); } );