Results 1 to 3 of 3

Thread: Theory behind javascript preloading?

  1. #1
    Join Date
    May 2012

    Theory behind javascript preloading?

    From what I'm reading, the list below is how javascript preloading works?

    1. Using an array, create a list of all resource's location
    2. Create an image object array
    3. Set each image's onload/onerror/onabort to an "image count" function.
    4. Once all the images are loaded, execute the main application.

    In step 4, once all the images are loaded, is the array of all the resource's location and the image object array no longer needed? I can delete them, and I would still be able to use the "preloaded" resources on-demand right?

    Basically, I'm looking for more details on preloading practices, especially after the "main function" execution.

  2. #2
    Join Date
    Dec 2005
    Yep, that's basically it.

    You are correct, once all the images are loaded, you don't need to do anything else with the array. The purpose of loading them is just to tell the browser 'hey, go and get the content at this URL for me will you?' and, as browsers do, if it's an image (and no additional headers are passed down with that image telling it not to be cached) the next time the browser encounters that same address it'll say, 'I've already got the content at that address, it's in my local cache on your machine so now I won't download it and I'll just serve it up from your cache!'
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...

  3. #3
    Join Date
    Aug 2006
    yup, i think that technically you only need to create a new image object and set it's src property to force the browser to cache the image.

    all the other stuff above is just to make it easier to pre-load many images.

    but i'm pretty sure that you could also just create a bunch of image objects all at once and set their src property but that would be more verbose, and you also would not have a way to tell if they were all preloaded with additional code to check.

    like this:
    new Image().src='image1.png';
    new Image().src='image2.png';

    more info here and here
    Last edited by bsmbahamas; 06-22-2012 at 05:06 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center