jQuery Image Preload, Relative to Current Document

What i wish to achieve, is a jQuery image preloader, that loads a different image based on the current document. The way i want to achieve this is through a jQuery script similar to: documentname-extension (ie .php .html) + _definable imagename and extension. So example, if the current document is index.php and you define the imagename as _kids.jpg the preloader will load the file index_kids.jpg, if you were开发者_运维知识库 in the document market.php, the preloader would load the file market_kids.jpg. I am not very skilled in jQuery, i have some ideas how to make a script to do this but nothing really organised. I was hoping someone could help me.

If you are using PHP, you could do it like this:

var img = new Image();
img.src = "<?php echo substr(__FILE__, 0, strrpos(__FILE__, '.')); ?>_kids.jpg";

For a javascript-only solution that will behave just like the example above:

var href = document.location.href;
var filename = href.substring(href.lastIndexOf('/')+1, href.lastIndexOf('.'));
img.src = filename+"_kids.jpg";

For getting the current file's filename without the extension, try this...

echo basename(__FILE__, '.' . pathinfo(__FILE__, PATHINFO_EXTENSION)); 

CodePad.