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.

facebook does this i think - they do exactly what u describe - load like the next 3-4 images ajax when scrolling through a gallery of someone's photos where you see 1 full size photo at a time, so when you scroll, you dont see any delay from loading. if u try to load so many images it will cause degradation in user experience which is why for instance facebook loads just the next 3 images. what you describe is ideal way to go i think. Of course when loaded, all the images on facebook are also cached so that they dont have to be fetched again as well such as when going back through the gallery. — sajawikio, Jan 07 '13 at 04:20

score 1 · Answer 1 · answered Jan 07 '13 at 04:45

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.

boisvert · Answer 2 · 2013-03-16T11:16:19.963

Ultimately, loading at HTML parse time, using javascript/jquery preloading or using ajax take the same time, especially if the image is large (if it wasn't, you wouldn't ask?).

The system has to open a connection, make a GET request for the file, and the file is transmitted over the network. If it is cached then it is not retransmitted. Network transfer is the bottleneck, and different load methods do not change that.

You'll influence your user's waiting times in two ways:

Reduce the size of your media, e.g. use thumbnails, be clever with compression, reuse large files so you exploit caching...
Time your image load carefully, which is what image preloading (with or without AJAX, it's the same thing) does. It's likely that it's impossible to know exactly when to start loading an image so the user won't wait. Loading three images ahead, as you propose, sounds fine to me. Users may, occasionally, wait, but more is overkill.

For a slide show, you could have an array to recall which images are unloaded, as a thumbnail, or fully loaded, which will ensure you don't make unnecessary repeat requests.

I've not really given you a magic bullet... There isn't one, but I hope this helps.

score 0 · Answer 3 · answered Jan 07 '13 at 09:28

I have already have this situation in which i have also taken both sample find the solution

Basically for basic image [thumbnail image] loading you can use lazy load for the page

and for the loading the large or main image you can load the thumbnail image into that and after you can write the code for loading the large image into it.

$('#GalleryImage img.mainImage').load(function() {  
  $(this).attr('src',$(this).attr('src').replace('thumb','large'));
});

May this will help you

Images Gallery, Preloading vs AJAX

3 Answers3