Jquery Best Case Scenario

Question

I am loading a bunch of images for a GUI which will pick attributes for my clients product.

Is it best to pre-load all the images at the start (which I'm guessing would take some time) and then have the GUI have full functionality or is it better to load images on the fly.

Essentially i am working on a picture/poster framing application. I have about 20+ frames that will be able to be selected by the user and when a frame is clicked I change the images for the frame on the display in the GUI.

I am using Jquery. Any insight would be helpful as to the best case scenario for this.

And if I will be pre-loading all the images how do I put one of those loading bars on the screen like you see in Flash or a loading gif like i've seen in Ajax?

Thanks

Mike

Answer 1

The correct answer depends on many factors. How large are the images and how many are there? Will loading all images at the start cause severe lag? As Jeff Atwood said Performance is a feature.

I would err on the side of a better performing app, rather than loading everything up front.

Answer 2

Depends on frame images' size...if they are small like 1 - 2K, I'd load the images dynamicaly, otherwise you can preload, but be sure to set the headers right so only once are read and fetched from cache next time.

As for progress bar, I suggest you check this article (talks about preloading images in jQuery and includes progress bar) on Ajaxian.

Answer 3

Why not do both?

You can load images lazily, but also hook $(document).ready() to pre-load the images. That way, if the user accesses an image before it's preloaded, it comes in then; if the user waits long enough it will be instantaneous.

This technique is common with things like menubar roll-overs.