View Full Version : How to get around Javascript code not running while photo's are loading???

05-19-2004, 03:10 PM
I'm trying to put together a photo gallery type site.

The idea is that users will log in and upload their photo's to the site. I'm talking normal users, so it's going to be a case of they come to the site and upload their photo's as unmodified jpg's, no resizing or cropping, because they just want to get them onto the site to show there family and friends.

So I'll have a list of preview photo's down the left. Now there could be quite a few of these. Also take into account that these are the actual photo's but with the width set down to 100px or something so that they are smaller. These will take quite a while to load, which is alright, they've got to load sometime!

Okay, so, in the middle of the screen will be an area where the selected photo is displayed. I've written some javascript that will push the previewed photo to the middle main display area and give it the correct size. This works fine and is especially great when all the previews are loaded as then the main photo's appear instantly (because they've already been loaded as the preview, although a little smaller, but the browser doesn't care about that).

My problem is that while the previews are loading my "select photo to display in main area" doesn't work, it does nothing, not even fail. Once ALL the previews are loaded then it works like a dream, but not until they are all loaded.

My javascript is as follows: -
function DisplayImage( source , href , width ) {
document.all[ 'DispImage' ].src = source ;
document.all[ 'DispImage' ].width = width ;
document.all[ 'DispImage1' ].href = href ;

The previews are images within A links, the href part is not executed as there is an onclick event that calls the javascript and then does 'return false' (to stop the href being executed). If I put the javascript call in the href it works, but stops loading the rest of the images.

The only thing that I can think of is to load each preview individually. So load the page with no images and then in an onload event or something write a loop that will load one image after the other, thereby giving the browser a break after each image and then maybe displaying the next clicked image AND THEN continueing to load the rest of the images.

This is far far far from perfect as it will still mean that the user will have to wait for the current image to load before they see the image they requested and it might not work at all if the loop has to finish in it's entireity before any other code is executed or if the loop runs at normal speed hence telling the browser to load all the images before the first one has finished loading. Oh and I don't know how to do this yet, but that's the least of my worries.

The reason that I'm going about it this way is that I just don't like the idea of firstly clicking a lowres preview and then waiting for the highres to load (when they could all be loading in the background) and secondly having two seperate images, one lowres for the preview and another highres, that's increasing the amount needed to be loaded by about 5% - 10%, insanity!

Thanks for any help on this.


05-20-2004, 11:45 AM
Not sure if I've not explained this too well and people don't understand what I am getting at or maybe this just is not possible???

Please say if there are areas that I could explain better.

Another idea I've had and wouldn't mind some comments on is to not load the photo's on the initial load of the page but rather get the onLoad event to load the pictures, this way the page will have loaded and it might make some difference.

Otherwise, I'm pretty sure that it is not possible to down scale photo's dynamically, i.e. to create a preview/thumbnail that is a fraction of the size of the original picture. Using HTML, Javascript, CSS or even Lotus Notes which is what database system this site will sit on.

Any alternatives greatly appreciated too.


05-20-2004, 12:42 PM
... to be frankly, I don't quite understand your problem... Maybe nor our friends here... hm