diff options
| -rw-r--r-- | index.html | 10 | ||||
| -rw-r--r-- | js/reveal.js | 34 |
2 files changed, 37 insertions, 7 deletions
@@ -71,7 +71,7 @@ try pressing <a href="#" class="navigate-down">down</a>. </p> <a href="#" class="navigate-down"> - <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> + <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> <section> @@ -82,14 +82,14 @@ <h2>Basement Level 2</h2> <p>Cornify</p> <a class="test" href="http://cornify.com"> - <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn"> + <img width="280" height="326" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn"> </a> </section> <section> <h2>Basement Level 3</h2> <p>That's it, time to go back up.</p> <a href="#/2"> - <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> + <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> </a> </section> </section> @@ -245,7 +245,7 @@ Reveal.addEventListener( 'customevent', function() { Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported. </p> <a href="#" class="navigate-down"> - <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> + <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png"> @@ -346,7 +346,7 @@ function linkify( selector ) { <section> <h2>Spectacular image!</h2> <a href="http://lab.hakim.se/meny/" target="_blank"> - <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny"> + <img width="320" height="299" data-src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny"> </a> </section> diff --git a/js/reveal.js b/js/reveal.js index 160b90f..524678d 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1905,6 +1905,11 @@ var Reveal = (function(){ viewDistance = isOverview() ? 6 : 1; } + // Limit view distance on weaker devices + if( isPrintingPDF() ) { + viewDistance = Number.MAX_VALUE; + } + for( var x = 0; x < horizontalSlidesLength; x++ ) { var horizontalSlide = horizontalSlides[x]; @@ -1915,7 +1920,13 @@ var Reveal = (function(){ distanceX = Math.abs( ( indexh - x ) % ( horizontalSlidesLength - viewDistance ) ) || 0; // Show the horizontal slide if it's within the view distance - horizontalSlide.style.display = distanceX > viewDistance ? 'none' : 'block'; + if( distanceX < viewDistance ) { + horizontalSlide.style.display = 'block'; + loadSlide( horizontalSlide ); + } + else { + horizontalSlide.style.display = 'none'; + } if( verticalSlidesLength ) { @@ -1926,7 +1937,13 @@ var Reveal = (function(){ distanceY = x === indexh ? Math.abs( indexv - y ) : Math.abs( y - oy ); - verticalSlide.style.display = ( distanceX + distanceY ) > viewDistance ? 'none' : 'block'; + if( distanceX + distanceY < viewDistance ) { + verticalSlide.style.display = 'block'; + loadSlide( verticalSlide ); + } + else { + verticalSlide.style.display = 'none'; + } } } @@ -2150,6 +2167,19 @@ var Reveal = (function(){ } /** + * Loads any content that is set to load lazily (data-src) + * inside of the given slide. + */ + function loadSlide( slide ) { + + toArray( slide.querySelectorAll( 'img[data-src]' ) ).forEach( function( element ) { + element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); + element.removeAttribute( 'data-src' ); + } ); + + } + + /** * Determine what available routes there are for navigation. * * @return {Object} containing four booleans: left/right/up/down |