Symphony.

A new extension, "Ajax Images" is now available for download. Comments and feedback can be left here but if you discover any issues, please post it on the issue tracker.

Ajax Images

This extension gives you the ability to load the images on your website with JavaScript. This gives the advantage that for website with a lot of images (like an image gallery for example) you can create a preloader with a progress bar (for example) to give the visitor the best user experience.

In order to use this extension you need to include jQuery and the plugin shipped with this extension.

Example markup

<script type="text/javascript" src="/extensions/ajax_images/assets/ajax_images.js" />
<script type="text/javascript">
    $(function(){
        $.ajaxImages({
            progress: function(p){
                // Here you can put some code for your progressbar. 'p' is a parameter from 0 to 1
            },
            complete: function(){
                // Here you can put some code to execute when everything is done loading.
            }
        });
    });
</script>

Note on background images

Background images (in CSS) are not preloaded by this extension. If you wish to preload these images, you need to put the images used in your CSS-files in your HTML-file, and hide them (as described in this guide).

This way, the images that are used as backgrounds are already loaded and cached by the browser and included in your progress bar.