Links of Movies - Debt Consolidation - Advertising Agency Software - Debt Consolidation - Online Advertising
PDA

View Full Version : Image Preloading

!Unreal
May 6th 2009, 4:58 pm
Ive written an image preloading script but Im not sure if it would work. Could someone look at it and just clear up wether it should work or not

<html>
<head>
<script type="text/javascript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array()
images[0]="/styles/lightskin/statusicon/pm_forwarded.gif"
images[1]="/styles/lightskin/statusicon/pm_new.gif"
images[2]="/styles/lightskin/statusicon/forum_new.gif"
images[3]="/styles/lightskin/statusicon/wol_lockedout.gif"
images[4]="/styles/lightskin/statusicon/thread_lock.gif"
images[5]="/styles/lightskin/statusicon/wol_error.gif"
images[6]="/styles/lightskin/statusicon/user_online.gif"
images[7]="/styles/lightskin/statusicon/thread_hot_lock.gif"
images[8]="/styles/lightskin/statusicon/thread_livetopic.gif"
images[9]="/styles/lightskin/statusicon/thread_hot_lock_new.gif"
images[10]="/styles/lightskin/statusicon/thread_hot_new.gif"
images[11]="/styles/lightskin/statusicon/thread_hot.gif"
images[12]="/styles/lightskin/statusicon/subforum_old.gif"
images[13]="/styles/lightskin/statusicon/user_invisible.gif"
images[14]="/styles/lightskin/statusicon/pm_replied.gif"
images[15]="/styles/lightskin/statusicon/thread_moved_new.gif"
images[16]="/styles/lightskin/statusicon/thread_dot_hot_lock.gif"
images[17]="/styles/lightskin/statusicon/thread_dot.gif"
images[18]="/styles/lightskin/statusicon/user_offline.gif"
images[19]="/styles/lightskin/statusicon/forum_link.gif"
images[20]="/styles/lightskin/statusicon/thread_dot_lock.gif"
images[21]="/styles/lightskin/statusicon/post_old.gif"
images[22]="/styles/lightskin/statusicon/thread_dot_new.gif"
images[23]="/styles/lightskin/statusicon/thread_moved.gif"
images[24]="/styles/lightskin/statusicon/thread_livetopic.orange.gif"
images[25]="/styles/lightskin/statusicon/forum_old_lock.gif"
images[26]="/styles/lightskin/statusicon/thread.gif"
images[27]="/styles/lightskin/statusicon/pm_old.gif"
images[28]="/styles/lightskin/statusicon/forum_new_lock.gif"
images[29]="/styles/lightskin/statusicon/announcement_new.gif"
images[30]="/styles/lightskin/statusicon/thread_dot_hot.gif"
images[31]="/styles/lightskin/statusicon/wol_nopermission.gif"
images[32]="/styles/lightskin/statusicon/announcement_old.gif"
images[33]="/styles/lightskin/statusicon/forum_old.gif"
images[34]="/styles/lightskin/statusicon/subforum_new.gif"
images[35]="/styles/lightskin/statusicon/thread_dot_hot_new.gif"
images[36]="/styles/lightskin/statusicon/thread_new.gif"
images[37]="/styles/lightskin/statusicon/post_new.gif"
images[38]="/styles/lightskin/statusicon/thread_dot_lock_new.gif"
images[39]="/styles/lightskin/statusicon/subforum_link.gif"
images[40]="/styles/lightskin/statusicon/thread_lock_new.gif"
images[41]="/styles/lightskin/statusicon/thread_dot_hot_lock_new.gif"
images[42]="/styles/lightskin/attach/jpg.gif"
images[43]="/styles/lightskin/attach/zip.gif"
images[44]="/styles/lightskin/attach/jpeg.gif"
images[45]="/styles/lightskin/attach/pdf.gif"
images[46]="/styles/lightskin/attach/jpe.gif"
images[47]="/styles/lightskin/attach/mp3.gif"
images[48]="/styles/lightskin/attach/wmv.gif"
images[49]="/styles/lightskin/attach/png.gif"
images[50]="/styles/lightskin/attach/attach.gif"
images[51]="/styles/lightskin/attach/txt.gif"
images[52]="/styles/lightskin/attach/rtf.gif"
images[53]="/styles/lightskin/attach/php.gif"
images[54]="/styles/lightskin/attach/tiff.gif"
images[55]="/styles/lightskin/attach/bmp.gif"
images[56]="/styles/lightskin/attach/psd.gif"
images[57]="/styles/lightskin/attach/tif.gif"
images[58]="/styles/lightskin/attach/xml.gif"
images[59]="/styles/lightskin/attach/doc.gif"
images[60]="/styles/lightskin/attach/gif.gif"
images[61]="/styles/lightskin/rating/rating_4.gif"
images[62]="/styles/lightskin/rating/rating_3.gif"
images[63]="/styles/lightskin/rating/rating_5.gif"
images[64]="/styles/lightskin/rating/rating_1.gif"
images[65]="/styles/lightskin/rating/rating_0.gif"
images[66]="/styles/lightskin/rating/rating_2.gif"
images[67]="/styles/lightskin/editor/copy.gif"
images[68]="/styles/lightskin/editor/paste.gif"
images[69]="/styles/lightskin/editor/insertorderedlist.gif"
images[70]="/styles/lightskin/editor/link.gif"
images[71]="/styles/lightskin/editor/resize_0.gif"
images[72]="/styles/lightskin/editor/resize_1.gif"
images[73]="/styles/lightskin/editor/justifyleft.gif"
images[74]="/styles/lightskin/editor/insertimage.gif"
images[75]="/styles/lightskin/editor/unlink.gif"
images[76]="/styles/lightskin/editor/attach.gif"
images[77]="/styles/lightskin/editor/spelling.gif"
images[78]="/styles/lightskin/editor/outdent.gif"
images[79]="/styles/lightskin/editor/justifycenter.gif"
images[80]="/styles/lightskin/editor/redo.gif"
images[81]="/styles/lightskin/editor/separator.gif"
images[82]="/styles/lightskin/editor/createlink.gif"
images[83]="/styles/lightskin/editor/bold.gif"
images[84]="/styles/lightskin/editor/html.gif"
images[85]="/styles/lightskin/editor/email.gif"
images[86]="/styles/lightskin/editor/quote.gif"
images[87]="/styles/lightskin/editor/underline.gif"
images[88]="/styles/lightskin/editor/insertunorderedlist.gif"
images[89]="/styles/lightskin/editor/undo.gif"
images[90]="/styles/lightskin/editor/justifyright.gif"
images[91]="/styles/lightskin/editor/indent.gif"
images[92]="/styles/lightskin/editor/italic.gif"
images[93]="/styles/lightskin/editor/paperclip.gif"
images[94]="/styles/lightskin/editor/removeformat.gif"
images[95]="/styles/lightskin/editor/menupop.gif"
images[96]="/styles/lightskin/editor/php.gif"
images[97]="/styles/lightskin/editor/color.gif"
images[98]="/styles/lightskin/editor/code.gif"
images[99]="/styles/lightskin/editor/cut.gif"
images[100]="/styles/lightskin/editor/smilie.gif"
images[101]="/styles/lightskin/editor/switchmode.gif"
images[102]="/styles/lightskin/buttons/collapse_tcat.gif"
images[103]="/styles/lightskin/buttons/yellowcard.gif"
images[104]="/styles/lightskin/buttons/mode_linear.gif"
images[105]="/styles/lightskin/buttons/redcard.gif"
images[106]="/styles/lightskin/buttons/reputation.gif"
images[107]="/styles/lightskin/buttons/post_thanks.gif"
images[108]="/styles/lightskin/buttons/find.gif"
images[109]="/styles/lightskin/buttons/upload_pictures.png"
images[110]="/styles/lightskin/buttons/firstnew.gif"
images[111]="/styles/lightskin/buttons/collapse_thead.gif"
images[112]="/styles/lightskin/buttons/sortasc.gif"
images[113]="/styles/lightskin/buttons/newthread.gif"
images[114]="/styles/lightskin/buttons/mode_hybrid.gif"
images[115]="/styles/lightskin/buttons/sendtofriend.gif"
images[116]="/styles/lightskin/buttons/printer.gif"
images[117]="/styles/lightskin/buttons/collapse_generic.gif"
images[118]="/styles/lightskin/buttons/reply_small.gif"
images[119]="/styles/lightskin/buttons/home.gif"
images[120]="/styles/lightskin/buttons/addpoll.gif"
images[121]="/styles/lightskin/buttons/forward.gif"
images[122]="/styles/lightskin/buttons/multiquote_off.gif"
images[123]="/styles/lightskin/buttons/multiquote_on.gif"
images[124]="/styles/lightskin/buttons/sortdesc.gif"
images[125]="/styles/lightskin/buttons/reply.gif"
images[126]="/styles/lightskin/buttons/sendpm.gif"
images[127]="/styles/lightskin/buttons/collapse_alt_collapsed.gif"
images[128]="/styles/lightskin/buttons/collapse_alt.gif"
images[129]="/styles/lightskin/buttons/lastpost.gif"
images[130]="/styles/lightskin/buttons/quickreply.gif"
images[131]="/styles/lightskin/buttons/report.gif"
images[132]="/styles/lightskin/buttons/threadclosed.gif"
images[133]="/styles/lightskin/buttons/mode_normal.gif"
images[134]="/styles/lightskin/buttons/ip.gif"
images[135]="/styles/lightskin/buttons/add_album.png"
images[136]="/styles/lightskin/buttons/email.gif"
images[137]="/styles/lightskin/buttons/mode_threaded.gif"
images[138]="/styles/lightskin/buttons/quote.gif"
images[139]="/styles/lightskin/buttons/edit.gif"
images[140]="/styles/lightskin/buttons/viewpost.gif"
images[141]="/styles/lightskin/buttons/collapse_generic_collapsed.gif"
images[142]="/styles/lightskin/buttons/infraction.gif"
images[143]="/styles/lightskin/buttons/subscribe.gif"
images[144]="/styles/lightskin/buttons/collapse_thead_collapsed.gif"
images[145]="/styles/lightskin/buttons/collapse_tcat_collapsed.gif"
images[146]="/styles/lightskin/reputation/reputation_balance.gif"
images[147]="/styles/lightskin/reputation/reputation_pos.gif"
images[148]="/styles/lightskin/reputation/reputation_off.gif"
images[149]="/styles/lightskin/reputation/reputation_neg.gif"
images[150]="/styles/lightskin/reputation/reputation_highneg.gif"
images[151]="/styles/lightskin/reputation/reputation_highpos.gif"
images[152]="/styles/lightskin/misc/question_icon.gif"
images[153]="/styles/lightskin/misc/13x13arrowdown.gif"
images[154]="/styles/lightskin/misc/skype_message.gif"
images[155]="/styles/lightskin/misc/birthday_small.gif"
images[156]="/styles/lightskin/misc/skype_voicemail.gif"
images[157]="/styles/lightskin/misc/album_folder_bg.png"
images[158]="/styles/lightskin/misc/bookmarksite_google.gif"
images[159]="/styles/lightskin/misc/calendar_popup.png"
images[160]="/styles/lightskin/misc/vbulletin2_logo.gif"
images[161]="/styles/lightskin/misc/trashcan_small.gif"
images[162]="/styles/lightskin/misc/down9x9.gif"
images[163]="/styles/lightskin/misc/unknown.gif"
images[164]="/styles/lightskin/misc/poll_posticon.gif"
images[165]="/styles/lightskin/misc/whos_online.gif"
images[166]="/styles/lightskin/misc/comment_add.png"
images[167]="/styles/lightskin/misc/calendar.gif"
images[168]="/styles/lightskin/misc/tree_ltr.gif"
images[169]="/styles/lightskin/misc/v.gif"
images[170]="/styles/lightskin/misc/birthday.gif"
images[171]="/styles/lightskin/misc/cross.png"
images[172]="/styles/lightskin/misc/rss.jpg"
images[173]="/styles/lightskin/misc/vbulletin3_logo_white.gif"
images[174]="/styles/lightskin/misc/calendar_icon.gif"
images[175]="/styles/lightskin/misc/menu_open.gif"
images[176]="/styles/lightskin/misc/skype_addcontact.gif"
images[177]="/styles/lightskin/misc/expires.gif"
images[178]="/styles/lightskin/misc/skype_info.gif"
images[179]="/styles/lightskin/misc/im_icq.gif"
images[180]="/styles/lightskin/misc/menu_background.gif"
images[181]="/styles/lightskin/misc/moderated_small.gif"
images[182]="/styles/lightskin/misc/im_aim.gif"
images[183]="/styles/lightskin/misc/navbits_finallink_ltr.gif"
images[184]="/styles/lightskin/misc/navbits_finallink.gif"
images[185]="/styles/lightskin/misc/skype_callstart.gif"
images[186]="/styles/lightskin/misc/tag.png"
images[187]="/styles/lightskin/misc/moderated.gif"
images[188]="/styles/lightskin/misc/skype_fileupload.gif"
images[189]="/styles/lightskin/misc/multipage.gif"
images[190]="/styles/lightskin/misc/colorpicker_close.gif"
images[191]="/styles/lightskin/misc/tree_tr.gif"
images[192]="/styles/lightskin/misc/tree_rtl.gif"
images[193]="/styles/lightskin/misc/tick.png"
images[194]="/styles/lightskin/misc/tree_ir.gif"
images[195]="/styles/lightskin/misc/album_folder_tab.png"
images[196]="/styles/lightskin/misc/navbits_finallink_rtl.gif"
images[197]="/styles/lightskin/misc/tree_t.gif"
images[198]="/styles/lightskin/misc/bookmarksite_stumbleupon.gif"
images[199]="/styles/lightskin/misc/im_msn.gif"
images[200]="/styles/lightskin/misc/album_folder_top_bg.gif"
images[201]="/styles/lightskin/misc/spam_detected.png"
images[202]="/styles/lightskin/misc/subscribed.gif"
images[203]="/styles/lightskin/misc/13x13progress.gif"
images[204]="/styles/lightskin/misc/colorpicker_transparent.gif"
images[205]="/styles/lightskin/misc/vbulletin3_logo_grey.gif"
images[206]="/styles/lightskin/misc/navbits_start.gif"
images[207]="/styles/lightskin/misc/subscribed_event.gif"
images[208]="/styles/lightskin/misc/paperclip.gif"
images[209]="/styles/lightskin/misc/magnifier.png"
images[210]="/styles/lightskin/misc/sticky.gif"
images[211]="/styles/lightskin/misc/bookmarksite_digg.gif"
images[212]="/styles/lightskin/misc/progress.gif"
images[213]="/styles/lightskin/misc/menu_open_usercss.gif"
images[214]="/styles/lightskin/misc/redcard_small.gif"
images[215]="/styles/lightskin/misc/im_skype.gif"
images[216]="/styles/lightskin/misc/userfield_edit.gif"
images[217]="/styles/lightskin/misc/trashcan.gif"
images[218]="/styles/lightskin/misc/yellowcard_small.gif"
images[219]="/styles/lightskin/misc/bookmarksite_delicious.gif"
images[220]="/styles/lightskin/misc/tree_i.gif"
images[221]="/styles/lightskin/misc/unknown_sg.gif"
images[222]="/styles/lightskin/misc/im_yahoo.gif"
images[223]="/styles/lightskin/misc/lightbox_progress.gif"
images[224]="/styles/lightskin/misc/11x11progress.gif"
images[225]="/styles/lightskin/misc/stats.gif"
images[226]="/styles/lightskin/polls/bar2.gif"
images[227]="/styles/lightskin/polls/bar5-l.gif"
images[228]="/styles/lightskin/polls/bar1-r.gif"
images[229]="/styles/lightskin/polls/bar4-r.gif"
images[230]="/styles/lightskin/polls/bar2-l.gif"
images[231]="/styles/lightskin/polls/bar1.gif"
images[232]="/styles/lightskin/polls/bar5.gif"
images[233]="/styles/lightskin/polls/bar2-r.gif"
images[234]="/styles/lightskin/polls/bar6-r.gif"
images[235]="/styles/lightskin/polls/bar3-r.gif"
images[236]="/styles/lightskin/polls/bar6.gif"
images[237]="/styles/lightskin/polls/bar4.gif"
images[238]="/styles/lightskin/polls/bar5-r.gif"
images[239]="/styles/lightskin/polls/bar4-l.gif"
images[240]="/styles/lightskin/polls/bar6-l.gif"
images[241]="/styles/lightskin/polls/bar1-l.gif"
images[242]="/styles/lightskin/polls/bar3.gif"
images[243]="/styles/lightskin/polls/bar3-l.gif"
images[244]="/styles/lightskin/layout/top_l.png"
images[245]="/styles/lightskin/layout/tcat_main.png"
images[246]="/styles/lightskin/layout/logout.png"
images[247]="/styles/lightskin/layout/commu.png"
images[248]="/styles/lightskin/layout/left_y.png"
images[249]="/styles/lightskin/layout/profile.png"
images[250]="/styles/lightskin/layout/faq.png"
images[251]="/styles/lightskin/layout/reg.png"
images[252]="/styles/lightskin/layout/alt2.png"
images[253]="/styles/lightskin/layout/beta.png"
images[254]="/styles/lightskin/layout/cal.png"
images[255]="/styles/lightskin/layout/pro_bot.png"
images[256]="/styles/lightskin/layout/logo5.png"
images[257]="/styles/lightskin/layout/pro.png"
images[258]="/styles/lightskin/layout/member.png"
images[259]="/styles/lightskin/layout/register.png"
images[260]="/styles/lightskin/layout/usercp.png"
images[261]="/styles/lightskin/layout/line.png"
images[262]="/styles/lightskin/layout/tcat.gif"
images[263]="/styles/lightskin/layout/logo.png"
images[264]="/styles/lightskin/layout/search_bg.png"
images[265]="/styles/lightskin/layout/noavatar.png"
images[266]="/styles/lightskin/layout/bot_x.png"
images[267]="/styles/lightskin/layout/quick.png"
images[268]="/styles/lightskin/layout/bot_r.png"
images[269]="/styles/lightskin/layout/bot_l.png"
images[270]="/styles/lightskin/layout/search_button.png"
images[271]="/styles/lightskin/layout/right_y.png"
images[272]="/styles/lightskin/layout/thead.gif"
images[273]="/styles/lightskin/layout/avatar.png"
images[274]="/styles/lightskin/layout/news.png"
images[275]="/styles/lightskin/layout/ads.png"
images[276]="/styles/lightskin/layout/foot.png"
images[277]="/styles/lightskin/layout/top_r.png"
images[278]="/styles/lightskin/layout/alt1.png"
images[279]="/styles/lightskin/layout/background.png"
images[280]="/styles/lightskin/layout/trans.png"
images[281]="/styles/lightskin/layout/top_x.png"
images[282]="/styles/lightskin/layout/newpost.png"
images[283]="/styles/lightskin/layout/pro_x.png"

// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}

}
</script></head>
<body onLoad="javascript:preloader()">
</body>
</html>
Aaron Sustar
May 7th 2009, 4:23 am
Whoa, that's A LOT of server requests you will be getting for each first-time visitor.

But if you really need to preload all these images, why don't you simply add them at the end of your HTML code with a style="display:none;" or an appropriate CSS class? The browser will request them from the server anyways, even though they are not displayed when the page first loads.
dimitar christoff
May 7th 2009, 5:50 am
erm - do you realise you need to actually WAIT for the image to load after the .src assignment before you pass on the next one? the speed with which a loop runs is 10000s of time faster than the possible download time of your image sets.

you can run it in a closure/anon function and make a new image object for each one, that way they would thread the download and you can get some events going like, onprogress, oncomplete etc.
fadetoblack22
May 7th 2009, 6:14 am
Whoa, that's A LOT of server requests you will be getting for each first-time visitor.

But if you really need to preload all these images, why don't you simply add them at the end of your HTML code with a style="display:none;" or an appropriate CSS class? The browser will request them from the server anyways, even though they are not displayed when the page first loads.

Don't use display: none because this causes some browsers to not cache them. Instead call them to the css with position absoulute set to off screen and when you include the image file on the page, set the height and width small.
camjohnson95
May 11th 2009, 3:26 am
I haven't tested this but if you change the bottom part to:

// start preloading
imageObj.src = images[i];

imageObj.onComplete = function() {
if(i<images.length) {
i++;
imageObj.src=images[i];
}
}
}
dimitar christoff
May 11th 2009, 5:11 am
i think the correct event here is onload and not oncomplete...

however, if I remember correctly, some browsers don't implement this and there were some differences in the timing of the event as well...

// evil, incosistent in opera and IE
var image = new Image();
image.src = 'image.jpg'; // instant if cached, hence line below won't run.
image.onload = function() {
// sometimes called
alert('image loaded');
};

// better:
var image = new Image();
image.onload = function() {
// always called
alert('image loaded');
};
image.src = 'image.jpg';


i have always done my image preloaders with mootools' Asset.images([img1, img2, .... imgn], options);
so i thought, lets try this in vanilla javascript and... it works (shocking!)

<html>
<head>
<script language="javascript">

// assign images as global
var imagesArray = [
"8-0.gif",
"article-bg.gif",
"article-page-bg.gif",
"big-bg.gif",
"body-bg.gif",
"bottom-end.gif",
"buzz.gif",
"carousel.jpg",
"close.gif",
"comment-button.gif",
"crop.gif",
"delicious.gif",
"digg.gif",
"follow-me-twitter.gif",
"goback-button.gif",
"go.gif",
"goog.png",
"icon.gif",
"itembg.gif",
"li-bg.gif",
"mister-wong.gif",
"mixx.gif",
"moostack.jpg",
"point_down.gif",
"progressbar-orange.gif",
"run-batch.gif",
"search-bg.gif",
"se_bubble.gif",
"se_bubbles.gif",
"sidebar-bg.gif",
"sidebar-gap.gif",
"side-bg-top.gif",
"social_bookmark_bg.gif",
"star.gif",
"stereo.gif",
"stumble.gif",
"tags.gif",
"targetter.gif",
"textarea-bg.gif",
"tooltip-ie.gif",
"tooltip.png",
"top-bg.gif",
"top-body-bg.jpg"
];

window.onload = function() {
// local scope. strictly speaking, images loading does not need to wait for onload, so you can change this.

// local variables and function assignments.
var loadedImages = [], reportProgress = function(where, what) {
// used to show how many images loaded thus far and / or trigger some event you can use when done.

// optional to show onscreen...
var output = "loaded ";
output += loadedImages.length;
output += " of ";
output += imagesArray.length;
output += " images.";
where.innerHTML = output;

// this bit will fire when all images done:
if (imagesArray.length == loadedImages.length) {
// total images onComplete. done. rewrite as you deem fit.

// keep in mind that if 1 of your images is a 404, this function won't trigger.
// alert("done");

// you can loop through them (if you use the objects, then output loadedImages[x].src or inject them
for (x in loadedImages) {
where.innerHTML += "<br />" + loadedImages[x];
}
}
}, loadImage = function(imageSrc, reportDiv) {
// actual function that loads image into DOM

var image = new Image(); // local scope, new object created per instance.

image.onload = function() {
if (!image) return;

loadedImages.push(image.src); // record this image path as loaded in global scope
// or... store the objects themselves so you can inject them:
// this.onload = null;
// loadedImages.push(this);

// sample report of progress
reportProgress(reportDiv, image.src);

// remove event and self to prevent IE from animated gif loops(see bottom) and clear up garbage objects.
image = image.onload = image.onabort = image.onerror = null;
};

image.src = imageSrc;
}, total = imagesArray.length, loadedProgress = document.getElementById("mydiv"); // local scope after load.

// loop through the images and load.
while(total-- || loadedImages.length == imagesArray.length) {
loadImage("http://fragged.org/images/" + imagesArray[total], loadedProgress, total);
}
};
</script>
</head>
<body>

<div id="mydiv">Loading images...</div>
</body>
</html>



this script will load whatever images i had in my images folder on http://fragged.org/ at the time of writing. it works in firefox, ie7, opera 9.6 and safari4 beta (that I tested thus far).

and yes, you can replace the window.onload with an anon closure instead... we don't need to wait for page onload to start loading the images but i am anal like that :D

*edit* i have now worked out that IE fires an onload event for animated gif loops. meaning, each time the animated gif run its sequence, the onload function run again, causing an endless set of reports and messing up the script. I have edited it to remove the event - but to be safe, I am setting the object and all possible events to null, collecting garbage as best as we can... careful if you pass on the object and not the path to the image to the loadedImages array, make sure this.onload = null beforehand.
seokingdom07
May 17th 2009, 10:10 pm
yes mototools is good option to preload the image. I oftenly use mototools for preloading images if needed
dimitar christoff
May 18th 2009, 4:50 am
erm, i took a snapshot of what I wrote above and created a blog post about it, covering image preloading, problems and possible usage ideas.

have a look here if you're interested.
http://fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html