Royalslider and Picturefill.js

1 comment

1. I managed to get RoyalSlider to work with Picturefill2 today, but you need to edit a section of the picturefill.js file to stop it recalculating on window resize. I just typed out some instructions in the RoyalSlider forum but I’ll copy here too in case it helps someone else.

   First up you have to grab picturefill.js from http://scottjehl.github.io/picturefill/#download .
   Then load up the script file in the HEAD of your document, not just before the body tag.
   If you require old browser support, i.e. browsers that don’t support HTML5 elements, you need to follow the instructions here to create a picture element. Alternatively, you can include Modernizr in your project (I was already using modernizr, so that’s how I did it).

   RoyalSlider Markup:
   Here is the code I used

   
<div class="royalSlider rsDefault">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="img/gsa-01.jpg" media="(min-width: 768px)">
<source srcset="img/gsa-01-smallest.jpg, img/gsa-01-smallest@2x.jpg 2x">
<!--[if IE 9]></video><![endif]-->
<img class="rsImg" srcset="img/gsa-01-smallest.jpg, img/gsa-01-smallest2x.jpg 2x" alt="GSA Est. 1935">
</picture>
<!-- etc... -->
</div>


   It looks a bit of a mess at first but its pretty easy to understand, and it’s all explained at the picturefill webpage, but basically the first <source> element should always be the highest quality version of the image you pan to serve, specified with media queries for when it should be loaded. So in the example above at < 768px, gsa-01-smallest is loaded. If the device has a device pixel ratio > 1, then gsa-01-smallest2x.jpg is loaded, until finally if the device pixel ratio is 1, then gsa-01-smallest.jpg is loaded.
   The IE9 wrapper is just a trick for IE9 support.

   Now, in order to use RoyalSlider and picturefill together, you have to make sure that picturefill has ran through the page and added in the correct src attribute to the img tag, before you let RoyalSlider do it’s thing. In order to do this, place your usual code for royalslider (jQuery(document).ready(function($) {
$(".royalSlider").royalSlider({...) into a file called defer.js. Now, just before the final tag of your document, but obviously after the jQuery and Royalslider js script tags, use this code (known as a Google Defer js script):

   
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>


   This says wait until the page has loaded everything else, then apply that script (loaded from js/defer.js).

   This works fantastically well, until you realise that when you resize the window everything breaks (FML!). This is because picturefill has a section of code in it that will make it swap out the image again every time the window is resized, which doesn’t work well with RoyalSlider at all. So, to stop this happening open up picturefill.js and find this block of code and comment it out (around line 250):

   
if( w.addEventListener ){
var resizeThrottle;
w.addEventListener( "resize", function() {
w.clearTimeout( resizeThrottle );
resizeThrottle = w.setTimeout( function(){
picturefill({ reevaluate: true });
}, 60 );
}, false );
}


   This is how I got it to work, and its a fantastic way of serving a slider to a phone – especially a full width slider. I don’t have to load a ~400kb full width image on a 3G phone, I can serve an ~80kb image instead 🙂

   Log in to Reply