Ajax Images
Preload your Images with AJAX
Browse
Description
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.