Due to some serious performance when rendering images for a complete year - like on Familiebilleder 2013 - Rendering +1000 thumbnails, this takes a long time.
So I kind of tripped over the blazy script - http://dinbror.dk/blog/blazy/ - which is described as:
bLazy is a lightweight script for lazy loading and multi-serving images. It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. bLazy works on all modern browsers, including on IE7+.
This is pretty easy to implement, there are 3 parts:
Loading the js File
Using a techinque like Installing Javascript libraries or frameworks in Confluence - be sure the js file is loaded
Initialize in the Custom HTML
Under Custom HTML in the Administration, under "At beginning of the BODY", add
<script type="text/javascript"> jQuery(function($){ // Initialize var bLazy = new Blazy({ selector: 'img' // all images }); }); </script>
Change the me-image Macro
To get the hook and thumbnails, the User Macro: me-image - Image lightbox with Flare (or similar) has to be changed a bit (refer to http://dinbror.dk/blog/blazy/):
## @param path:title=Status|type=string|required=true|desc=File Path ## @param image:title=Status|type=string|required=true|desc=Image Name ## @param group:title=Status|type=string|required=true|desc=Group ## @param thumbsize:title=Thumbsize|type=string|required=false|desc=Thumbnail Size ## @param displaysize:title=Displaysize|type=string|required=false|desc=Display Size ## Default Thumb and Display Sizes: #set($ThumbSizeDefault=200) #set($DisplaySizeDefault=800) #if (${paramthumbsize} != "" ) #set($ThumbSizeDefault=${paramthumbsize}) #end #if (${paramdisplaysize} != "" ) #set($DisplaySizeDefault=${paramdisplaysize}) #end #set ($title=$parampath.replace("//", "")) #set ($title=$title.replace("%20", " ")) #set ($title=$title.replace("/", " / ")) <a href="/media/${parampath}/thumbs/${DisplaySizeDefault}pxHigh/${paramimage}" data-target="flare" data-flare-scale="fitmax" data-flare-gallery="${parampath}" data-flare-thumb="/media/${parampath}/thumbs/${ThumbSizeDefault}pxHigh/${paramimage}" tilte="${paramimage}" data-title="$title" data-description="<h3>$title / ${paramimage}</h3>"><img src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== class="b-lazy" data-src="/media/${parampath}/thumbs/${ThumbSizeDefault}pxHigh/${paramimage}" data-src-small="/media/${parampath}/thumbs/${ThumbSizeDefault}pxHigh/${paramimage}" /></a>