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

images with data-src attribute are now lazy-loaded #793

Browse source
This commit is contained in:
Hakim El Hattab 2014-04-22 15:41:08 +02:00
parent 5d39b5eabf
commit 343765b7ab
2 changed files with 37 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -71,7 +71,7 @@
try pressing <a href="#" class="navigate-down">down</a>. try pressing <a href="#" class="navigate-down">down</a>.
</p> </p>
<a href="#" class="navigate-down"> <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> </a>
</section> </section>
<section> <section>
@ -82,14 +82,14 @@
<h2>Basement Level 2</h2> <h2>Basement Level 2</h2>
<p>Cornify</p> <p>Cornify</p>
<a class="test" href="http://cornify.com"> <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> </a>
</section> </section>
<section> <section>
<h2>Basement Level 3</h2> <h2>Basement Level 3</h2>
<p>That's it, time to go back up.</p> <p>That's it, time to go back up.</p>
<a href="#/2"> <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> </a>
</section> </section>
</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. 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> </p>
<a href="#" class="navigate-down"> <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> </a>
</section> </section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png"> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
@ -346,7 +346,7 @@ function linkify( selector ) {
<section> <section>
<h2>Spectacular image!</h2> <h2>Spectacular image!</h2>
<a href="http://lab.hakim.se/meny/" target="_blank"> <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> </a>
</section> </section>

34
js/reveal.js
View file

@ -1905,6 +1905,11 @@ var Reveal = (function(){
viewDistance = isOverview() ? 6 : 1; viewDistance = isOverview() ? 6 : 1;
} }
// Limit view distance on weaker devices
if( isPrintingPDF() ) {
viewDistance = Number.MAX_VALUE;
}
for( var x = 0; x < horizontalSlidesLength; x++ ) { for( var x = 0; x < horizontalSlidesLength; x++ ) {
var horizontalSlide = horizontalSlides[x]; var horizontalSlide = horizontalSlides[x];
@ -1915,7 +1920,13 @@ var Reveal = (function(){
distanceX = Math.abs( ( indexh - x ) % ( horizontalSlidesLength - viewDistance ) ) || 0; distanceX = Math.abs( ( indexh - x ) % ( horizontalSlidesLength - viewDistance ) ) || 0;
// Show the horizontal slide if it's within the view distance // 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 ) { if( verticalSlidesLength ) {
@ -1926,7 +1937,13 @@ var Reveal = (function(){
distanceY = x === indexh ? Math.abs( indexv - y ) : Math.abs( y - oy ); 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';
}
} }
} }
@ -2149,6 +2166,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. * Determine what available routes there are for navigation.
* *