CODEWITHSUNDEEP
phpjqueryajaximagepreload
str11
str11

Reputation: 437

Images Gallery, Preloading vs AJAX

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.

Upvotes: 8

Views: 578

Answers (3)

boisvert
boisvert

Reputation: 3739

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.

Upvotes: 1

Harsh Chunara
Harsh Chunara

Reputation: 585

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

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191819

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.

Upvotes: 1

Related Questions