Using an image preloader script in your template.

If you are using mouseover images for your navigation and want to prevent the lag time of the images loading before you can mouseover, then using a image “preloader” script is the way to go.

Add the following Javascript snippet just above your closing head tag:

<html>
<head>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>

Then add the full url’s of the images you want to preload in the body tag.

About the author

5 Comments

  1. Hello, is it possible to preview the templates before installing them in Joomla (it’s zip file, so I don’t think so).
    It’s easier to download a lot of templates at once from web but installing them one by one is time consuming. Is it possible to copy/paste them in template file like pictures and in that way avoiding entering them one by one, or preview them in some way.

    Thanks and all the best

  2. I think you would be hard presssed to find a web template company that did not have a preview and a demo of their goods.

  3. does the pre-loader code you have above apply to any image?

    thanks

  4. hello matt, im new to joomla and I found it interesting. But there are some issues I want to know more like how can I make my website load faster. and specially the images. is there any image preloader for images? why joomla site load very slow? how can I speed it up?

  5. So can you give me an example of what the body tag would look like with the image url’s. I’m trying to make it work and it’s not working properly. Thanks!

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>