Home› General support

Simple and robust preloading

ulfben Member
in General support
Summary; this is about preloading images to allow seamless browsing without pageloads.

A couple of years back I spent some time applying the tricasa preloading hack in the default theme. As you can see it was quite messy and a bit broken, but served me well for quite some time.

Nowadays we've got jQuery and HTML5, allowing us to accomplish some seriously robust preloading; keeping browser, URL and ajax-fields in sync.

Add this short snippet to your image.php to preload one image ahead:
`



//



`

Pastebin for sane formating: http://pastebin.com/LT9ieJXB

Live demo here.

As you can see I simply load the next page as soon as the current one is done (thus, not imposing any extra wait for the user). When the user clicks "Next Image" I cancel her request and use JavaScript to replace the current HTML with the preloaded page. Thanks to HTML 5 and pushState we're able to update the browser URL bar too!

Brilliant in it's simplicity. :)

I've only tested in Chrome and IE9. IE9 obviously doesn't support the HTML5-exclusive history.pushState, but I vastly prefer that over messing with hashbangs (fragment identifiers).

Comments

  • acrylian Administrator, Developer
    Thanks always welcome. Seems to work good in Safari 4. In FF 3.6 it seems not to work (I know not that latest version but not that old - sadly currently end of line for my current machine..). Maybe because of the html5 stuff as I would expect that the jquery part should work?

    It would be great if you could make a real plugin out of this using the head filter. Also maybe follow what we suggest here (stuff just on the forum tends to get lost):
    http://www.zenphoto.org/news/general-contributor-guidelines#themes-and-plugins
  • ulfben Member
    Can you help me out and point to some good source of information on how to go about writing a ZenPhoto plugin?

    I'm like to think I'm not a complete idiot; I've been going through the extensions archive to find some example code of what a plugin should look like. But they all seem to be recipies for hacks or dead links. I tried the plugin folder of the ZenPhoto installation archive, but that's empty too.

    Where's the code for these so called plugins?
  • ulfben Member
    Okay, the Archive Calendar had some code and looked fairly well implemented. But I realize what I need is an API overview. Is there such a thing?
  • acrylian Administrator, Developer
    /plugins is for custom third party plugins to be stored (plugins need to be setup to use that)
    /zp-core/zp-extensions/ contains the officially included plugins that should not be modifyied for upgrade issue prevention.

    Main resources:
    http://www.zenphoto.org/news/category/user-Guide
    and specifically:
    http://www.zenphoto.org/news/zenphotos-object-model-framework
    http://www.zenphoto.org/news/zenphoto-plugin-architecture

    And of course the functions documentation.
Sign In or Register to comment.