How can I improve the performance of the jquery fancybox plugin?

Question

I am using fancybox (http://fancyapps.com/fancybox/) to take a PDF, split it up into individual images and HTML pages and present it as a fancybox gallery.

In the gallery there is a mix of static images and HTML pages with intra-gallery links. To get fancybox to render this properly I treat all the gallery elements as iframes.

So every image is presented on an HTML page with this CSS to make the image a full screen background in the iframe:

html, body {width:1024px; height:768px; padding:0; margin:0; }
html {overflow: hidden; background: #d3d3d9; }
body {
background-image:url('images/slide_2.png');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

My question is, how can I improve the performance of the animated gallery transitions? I was thinking perhaps finding a way to pre-load the next item in the gallery? Or maybe there is a way to customize the fancybox plugin to improve animation performance? Or both? Looking for suggestions. Thanks. Here's a link to an example of what I'm working on ( link removed for privacy of client ), notice how clunky the animation of the slide moving offscreen is.

Alternatively, is there a better solution than fancybox for a gallery/slide show type experience that must handle both images and HTML pages?

Answer 1

I would suggest:

1. Make your images smaller if possible , little let quality or use .PNG instead of other formats ( smaller with more quality )
2. Create the images in the right size and remove the scaling, just use background-image css property and place a 1:1 image in the background ( assuming the scaling takes some time to )
3. When all done use something like http://www.textfixer.com/html/compress-html-compression.php to compress the html and use https://csscompressor.net/ to minimize the css
4. Make sure you use the .js.min ( minified version of the JS fancy box you downloaded )

Above should give you some good speed improvements in loading the page. Nice animations though!

Answer 2

I had a hunch that if I could load images in advance without displaying them the browser cache would already have the image in memory when a slide with one those images is displayed later. So I found a simple javascript function to preload images:

if (document.images) {
  img1 = new Image();
  img1.src = "image.jpg";
  img2 = new Image();
  img2.src = "image2.jpg";
}

source: http://www.mediacollege.com/internet/javascript/image/preload.html

I use this script on each iframe to cache the image from the iframe which follows it. So on iframe 1, I cache the image that is on iframe 2. This has improved performance noticeably. Anyone have suggestions for how I could improve this? Are there better functions for caching images? I actually found a few options and this is the first one that worked. Haven't had the time to try others yet, curious if other people have experience caching images to display later.