0

I'm new to web-dev so please sorry me if this is a dumb question. I am confused about image preloader. I'm writing a gallery containing more or less 30-40 big images. The gally has some thumbs and if click on ones it shows the big one.

For now my HTML looks like this:

<script type="text/javascript">
    var gallery_smallsize_urls = [
        "0_small.jpg", "1_small.jpg",
        "2_small.jpg", "3_small.jpg", 
        ...
        ];

    var gallery_fullsize_urls = [
        "0_full.jpg", "1_full.jpg",
        "2_full.jpg", "3_full.jpg",
        ...
        ];
</script>

<div id="gallery_thumbs">
    <ul>
        <li> <img id="gallery_thumb0" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb1" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb2" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb3" src="loading.gif" alt="0"> </li>
        ...
    </ul>
</div>

now, i have 2 features in my mind:

  1. Queue of loading. The page is loaded. On document ready the js begin the queue of thumbs. That means: load the 1° thumb and only when it finished begin to load the 2°. And so on.

  2. Preloading of the fill size image. When the user click on the thumb is has to wait less time possible to show the full (because the full size images are already cached in memory).

Now, i have found this voted answer:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

but i think it is only the answer of the point 2. What happens here? The images are loaded in the same time? I don't know how to approach the point 1. I think that the best way is using the Deferred object....

Some advice?

Community
  • 1
  • 1
nkint
  • 11,513
  • 31
  • 103
  • 174
  • 1
    There should be no need to preload images you plan on showing on the initial page load, meaning the thumbnails. Your browser handles this perfectly fine for you. – dqhendricks Nov 30 '12 at 18:14

1 Answers1

1

You could use image pre-loader plugin (jQuery).

https://github.com/desandro/imagesloaded

This would allow to pre-load thumbnails before showing (this is more for effect as browser will do it anyway).

As far as large images, you can use the plugin to load all images in the background. For example:

var sampleImage= new Image();
sampleImage.src = imageURL;

$(sampleImage).imagesLoaded({
    done: function($images){
              // do something when image is loaded
    });
});
DominicM
  • 6,520
  • 13
  • 39
  • 60
  • that plugin seems great, but sorry my js knowledge is not so high.. it seems to me that it has something recursive but.. what does it do?? – nkint Nov 30 '12 at 22:34
  • All it does is fire "done" event when a particular image has finished loading. As in the example you can execute any code you want when the image has loaded. You don't need to use it unless you want a nice fade or other effect. You can just use the first 2 line in my example code. You will need to do that for each image of course. – DominicM Dec 01 '12 at 00:38
  • my comment was on what happened behind the hood.. i had a look at the code of the plugin and i was thinking how it works.. – nkint Dec 01 '12 at 14:15