Images Gallery, Preloading vs AJAX

Question

Hey I'm trying to make an image gallery but I am stuck at whether I should load all the images while the page loads or get ajax to request new images before they are displayed in the gallery?

The example below shows that I'm viewing the second image and have 2 hidden images loaded while image 5 is loading via ajax request. I thought if I keep two loaded images between the image being viewed and the image ajax is loading users should not have to watch an image load

   Image Gallery (Viewing Single Image)
   1        2      3       4       5
+-------+-------+-------+-------+-------+
|       |Loaded |       |   *   |Loading|
|Loaded |  On   |Loaded |Loaded | AJAX  |
|Hidden | Show  |Hidden |Hidden |Request|
+-------+-------+-------+-------+-------+

I havent used ajax off localhost so dont know what kind of performance it has compared to just loading the images with the page and hiding them.

Answer 1

You can generally rely on the browsers cache to load images quickly. A very dependable way that I've found to do this is with the following:

$("<img>").attr('src', imageSrc);

This creates an image element, doesn't append it to the DOM, but the browser will still download the image and cache it. With that, you can append either the image element you created or use a new image element with that image source and there shouldn't be a load delay.

I'm not sure what you mean by loading with ajax. Since an ajax request is not any different than any other request, there shouldn't be a performance difference between using "ajax" and "just loading" the images. There may be some overhead on the server if you are using a script to load the image in some way.