Preloading images for gallery

JavaScript
1

Hi All

I am developing a website for my budding photographer son, Tom, and I
want to provide an gallery where the user clicks on a thumbnail and this
displays a larger image.

The only way I see that I can do this is to have a link on the thumbnail to load the page again passing the image name or id to the page using a query string and processing this using PHP.

If I preload all of the larger images when the site first loads will these images be available in the cache for other pages.

Another way is to hover the thumbnails and display the larger image but I need to find a way to keep the image displayed until the user hovers over another thumbnail.

I am reluctant to start until I have it clear in my mind.

Any ideas anyone?

Thanks

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

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

from: http://stackoverflow.com/questions/476679/preloading-images-with-jquery
by: http://stackoverflow.com/users/21677/j-p

3

Making a js preloaded is easy:


function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            imageObj.src=images[i];
        }
    }
}

( no jQuery required),

You can call the function from <body onLoad=“preload(‘your/list/of.jpg,image/urls.jpg’);”

Now, the question is… WHY do you want to make a user wait ? a photo site may contain dozens if not more thumbnails and and now you are adding an equal # of LARGE images before the functionality can be made available. Sure, you may say many people have broadband; that, on a good day, their mobile connection can handle this load, or that somehow your son has unlimited Gbs of of data transfer from his ISP ( since the page will transfer ALL his portfolio, even if they cam to see one pic or landed on the page by mistake).

These are things to consider before reloading a gallery of full size images.

4

Thanks for your reponses

I would like to avoid the flickering effect when the page reloads but maybe this is better than the user having to wait when the site loads before they have any functionality. Are there any other ways of doing this.

There are only 18 images so the site is not huge.

Thanks

5

With this part you could put an onmouseover event handler on an image which displays the image enlargement in another container on the same page. You don’t have to display the enlargement on a new page.

The enlargement will remain visible until you mouse over another thumbnail that calls the same event handler and so replaces the current enlargement with the enlargement of the second thumbnail.

6

Hi webdev1958

I would have to preload the images I assume?

I will investigate this, thanks.

7

You don’t have to but I would recommend doing so.

You could then assign the onmouserover event handlers to the images on window.onload (after all the images have been downloaded).

There are also 2 schools of thought regarding whether you have 2 different sized image files for each thumbnail or just 1 image file per image (the enlargement size) and then scale it down to the thumbnail size. Personally I prefer to have just 1 enlarged image file and scale it down to whatever size I need for the thumbnail.