JAIPHO 0.51 - Improved image preloading

April 15, 2009 by Tole

Here is second beta release. As major change it brings better user experience on loading both thumbnails and slides in your gallery. Here is the list of all changes.

Jaipho changes
Upgraded images preloading system - javascript JphUtil_Preloader class. It preloads slides, so when user triggers next button the image will already be prepared. There are few changes in it comparing to previous version.
SLIDE_PRELOAD_SEQUENCE variable holds information in which order (priority) the next slides in gallery will be preloaded. Default set at '1,-1,2' and that value will load first next, first previous and second next slide in one by one order. Next item from sequence will start to load after the last is finished. It also works in reverse mode when user is sliding from last to first slide in your gallery. When Jaipho detects that user is going backwards, it will just use inverse sequence values e.g. '-1,1,-2'.
MAX_CONCURENT_LOADING_SLIDE sets how many next slides will load at once, but I think that for best performance you should keep it at default value which is '1'.
New Preloader is also used in thumbnails mode and with MAX_CONCURENT_LOADING_THUMBNAILS set at 4, it will load maximum 4 thumbnails at the time. This improves end user experience, especially on slower mobile connections.

Now you can unblock vertical scroll through BLOCK_VERTICAL_SCROLL. Default is at true and it prevents accidentally loosing slide from center of the screen.

Nice guys from iPhoneWebDev user group provided some nice and useful comments on the first Jaipho release. Few remarks from that post, mostly on some basic Javascript usage, are also implemented. Javascript eval function is completely removed from usage, and the += string concatenation is replaced with appending string to array. Special thanks to RobG.

Download package
From src file all debug lines are removed so it is slightly lighter. For debugging you can use original src files which are now also included in download package.

Upgrade instruction
Upload new javascript source file on your server (jaipho-0.51.00.zip).
After that, you should change some values in your template file.
Change the src attribute of script tag, to point at that new uploaded source file.
In javascript block, remove the SLIDE_PRELOAD_TIMEOUT_PREV definition, and add these lines:
var SLIDE_PRELOAD_SEQUENCE = '1,-1,2';
var MAX_CONCURENT_LOADING_THUMBNAILS = 4;
var MAX_CONCURENT_LOADING_SLIDE = 1;

Permalink