1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Image Preloading

Discussion in 'JavaScript' started by !Unreal, May 6, 2009.

0
  1. #1
    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):
     
    !Unreal, May 6, 2009 IP
  2. Aaron Sustar

    Aaron Sustar Peon

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Aaron Sustar, May 7, 2009 IP
  3. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #3
    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.
     
    dimitar christoff, May 7, 2009 IP
  4. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #4
    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.
     
    fadetoblack22, May 7, 2009 IP
  5. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #5
    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):
     
    camjohnson95, May 11, 2009 IP
  6. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #6
    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 :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.
     
    dimitar christoff, May 11, 2009 IP
    FilmFiddler likes this.
  7. seokingdom07

    seokingdom07 Banned

    Messages:
    132
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    yes mototools is good option to preload the image. I oftenly use mototools for preloading images if needed
     
    seokingdom07, May 17, 2009 IP
  8. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #8
    dimitar christoff, May 18, 2009 IP