how2blog.de

Hi folks,

I am using a gallery2 system and after about 25k photos and a few hundred albums, I recognized a lack of performance which caused long loading times for the next photo. There are several methods for preloading web elements, e.g. a skin supporting preloading by default (hybrid), but I am using a strong customized ‘ICE’ theme, which had to stay. I gave up installing preloading features from other skins into the ice, it’s just too complex. So I decided to use the prefetch feature which is already supported several years by browsers like ie or firefox.

ok, let’s start:

if you change any *.tpl file, create a folder ‘local’ and simply copy the original *.tpl file there. Now make your changes only in the local folder!

1) preloading the next photo

theme.tpl
paste the following code into the head area:

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$theme.navigator.next.item.id`" arg3="serialNumber=`$theme.navigator.next.item.serialNumber`"}"/>

The browser will now download the photo into its cache and if you go direct to the jpg-url,
the browser get’s the image out of its cache. I convinced myself with the “Live HTTP headers” Plugin for firefox.

as default, the click on ‘next’ calls a render feature (g->image) which causes a request for the already preloaded photo. So it would be loaded twice!
To work around this issue, the render has to be replaced which a default url fetcher.

2) replace render feature

photo.tpl

find the following line:

{g->image id="%ID%" item=$theme.item image=$image fallback=$smarty.capture.fallback class="%CLASS%"}

and replace it with:

<img src="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$theme.item.id`"}">

One sideeffect should be mentioned, if you replace the render method, there won’t be a imageframe, border or anything else around the photo.