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> Code (markup):
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.
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.
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.
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]; } } } Code (markup):
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'; PHP: 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> PHP: 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 *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.
yes mototools is good option to preload the image. I oftenly use mototools for preloading images if needed
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