Member Avatar for theimben

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>
  • 4 Contributors
  • 10 Replies
  • 297 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

Simply seperate this using .js and attach it to the page where you want your images to be preloaded.

/***********************************************
* Unobtrusive Image Preloader script - by essential
* This notice MUST stay intact for use
***********************************************/
var preload, myImages; 
var img, iLen, x, y;
var isImage = [ {
iSrc : [],
iPath : [] }];

preload = (function() {
myImages = function() {
   if ( document.images ) {
   img = ( document.getElementsByTagName ) ? document.getElementsByTagName("img") : document.images;
   iLen = img.length;
      try {
         for ( x = 0; x < iLen; x++ ) {
         isImage[0].iSrc[x] = new Image();
            for ( y in isImage[0].iSrc ) {
            isImage[0].iPath[y] = img[y].src;
            }
         isImage[0].iSrc[x].src = isImage[0].iPath[x];
         img[x].src = isImage[0].iSrc[x].src;
         } return true;
      }       
      catch( e ) {
      (( e.description ) ? alert( e.description ) :  alert( e.message ));
      } 
   } return false;
}; // Main Function
   return {
myImages : myImages 
   };
}()); // Preloaded Images

window.onload = preload.myImages;
Member Avatar for theimben

So I dont have to edit anything using this? It will do everything automatically for me?

Member Avatar for almostbob

So I dont have to edit anything using this? It will do everything automatically for me?

yep
and its a tight script too

Member Avatar for essential

Yeah, as bob said, it doesn't need anything--just include it in your page's...

Member Avatar for theimben

Will it handle anything comming trough CSS?

Member Avatar for essential

It can only handle images, from (x)HTML document's, but not In CSS.

Member Avatar for theimben

Ah ok. Do you know of a good way to do it with CSS?

Member Avatar for essential

There is a possible way to do it! If you will create a <style></style> block dynamically and alter all present images inside the block before injecting it to the page.

Member Avatar for Airshow

Hi Essential,

Would it be fair to point out that, in addition to images defined in CSS not being catered for, that your (very neat) preloader would also not handle images whose URLs are computed (or looked up) in response to future events after page load?

In other words, as with CSS, images not included in the originally served (X)HTML will not be preloaded by onload = preload.myImages .

And the big one: Apart from ad hoc foo = new Image(); foo.src="bar.jpg" here and there, what can be done to preload in an organised way? I have used ad hoc code as above many times and always wonder if a more general pattern/technique might be developed. You seem to have your mind nicely round this sort of thing so over to you ..... (new topic?)

Airshow

Member Avatar for essential

Hi Airshow,

If only javascript offer's another way, that let me create my images without using new keyword, then i would be using it on the script. So right now, i'm stuck on this situation were there are no other option's, but to used the old fashioned ( var foo = new Image(); foo.src = "path"; ) to create new image object.
Everyone, can apply different pattern's/teqniche's, but still they need to consider the things, of using the new Image(); to create their image object.
And it's just an image preloader script, and if someone would've want another function asside from preloading their images -- then the query should be in the form of ( Image preloading and some other function ).
I've created the script, to skip difining URLs into array's:

var imgArray = [];
imgArray[0] = new Image();
imgArray[0].src = "path/image0.jpg"; 

// so...on...

but if someone's want to specify URL for their images, then i think the preloader script need's to take some re-modification to work on that thing.

And if someone also want to grab images inside CSS, then they can use DOM parser or AJAX to alter everything like: background : #fff url( /* replace background */ )... .
Maybe i will take my to create another version of preloader script...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.