display lowsrc image while loading the high resolution image

jastroem used Ask the Experts™
On a page I have one larger image surrounded by 7 smaller thumbnails. A click on a thumbnail will just set another
document.images.myImage.src some sort of a slide show.

The 7 highRes images are not intended to be preloaded, and therefore I would like to display a lowsrc gif image as a "image loading" screen.

How can this be done?

Or basically, how can one in a javascript determine if an image is loaded or not.

/ joergen
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Just expand the img tag by adding lowsrc. This is supported by both major browsers, although not standard HTML. For example:

<b>&lt;IMG SRC="myimage.gif" LOWSRC="myimagelow.gif"&gt;</b>

the browser will load the LOWSRC file first then load the src file.

Just expand the img tag by adding lowsrc. This is supported by both major browsers, although not standard HTML. For example:

<IMG SRC="myimage.gif" LOWSRC="myimagelow.gif">

the browser will load the LOWSRC file first then load the src file.


I thought of that too. But will this work if I change the img src to another src?

i.e will the initial lowsrc image be displayed again when I swap "the main image" to another?

/ joergen
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

I haven't tried that but you could try setting both the SRC and LOWSRC if that becomes an issue.

if i undersatdn well, you have on your thumbnail
<img src="thumbnailID" onclick="changeBigImage('thumbnailIDsrc','thumbnailIDlowSrc')>
<img src="bigImage" lowsrc="bigImageLowSrc" id="BigImageName">

when u click, u should try :
function changeBigImage(thumbnailIDsrc,thumbnailIDlowSrc)

it will swap the BigImage Image to the thumbnail src and while loading this image, it will change the lowsrc

If it does not work, there could be some solution with working with layers.

Good luck

A simple way;
Give your thumb images the NAME of the big image source and use a JavaScript onClick event to set the new source;
<IMG SRC="blue.jpg" NAME="bigblue.jpg" onClick="document.images.myImage.src = 'YourImagePath/' + this.name">
<IMG SRC="green.jpg" NAME="biggreen.jpg" onClick="document.images.myImage.src = 'YourImagePath/' + this.name">
<IMG SRC="biggreen.jpg" NAME="myImage">

The 'YourImagePath' is the path to your images.
If that is the same as the path of your document you can remove both that and the plus sign.



I don't have that yet, but that's what I thought of.

First I tryed just to realize the lowsrc thing, but it didn't really work.... even if I - to ensure long loading time- took a src image of some 2 MB size. Perhaps it didn't work because I only tryed it on my local machine(?)

Anyhow, I will try your:

function changeBigImage(thumbnailIDsrc,thumbnailIDlowSrc)

and see if it works when I do it on the live server


That's smart, but to me it doesn't solve the needed appearance of an "image loading screen"


First I thought of something like this:
[here only a descrption of what should happen]

1) When clicking on one of the thumbs load a "image loading gif" as src for the big image

2) load the new big image

3) check (in a while loop, something like each second) if the new big image is loaded

4) when loaded, then swap again from the "image loading screen gif" to the new big image

All to give the user some feedback that the image is "on its way", else they will click and click all over again on the thumbs.

Offcourse we could preload all the 7 images while loading the page... but all images will be randomly drawn from directories with quite some images (it is images from an educational institution...) and we don't want to have each user loading all these images if they don't really want to see them (like the students themself) - pop up has been considered but rejected.

In any case, how can I by javascript detect if a specific image has been loaded?

/ joergen
Oh... I might have read your question wrong...
Change the onClick to;
onClick="document.images.myImage.lowsrc = this.src; document.images.myImage.src = 'images/' + this.name"

That should do it.
It will now set the new lowsource of myImage to same as the thumbnail, and the source to the thumb's name.

Good luck :-)
Will do some thinking based on the info from your last post :-)
Currently uploading a 3+ MB image to my server to test if my theory is working. That should give enough loading time to display a lowsrc image ;-)

onClick="document.images.myImage.lowsrc = 'images/imageloading.gif'; document.images.myImage.src = 'images/' + this.name"
ok. That didn't work.
However, the following did perfectly :-)

onClick="document.images.myImage.src = 'images/imageloading.gif'; document.images.myImage.src = 'images/' + this.name"

Put that onClick in every thumb img tags, replacing 'images/' with whatever your images folder is, or removing it if same as document's folder :-)
Forget all I've said so far... Sorry.

Here's a working option;

<img src="images/blue.jpg" name="bigblue.jpg" width="150" height="113" id="blue" onClick="document.images.myImage.src = 'images/imageloading.gif'; document.images.preLoad.src = 'images/' + this.name">
<img src="images/purple.jpg" name="bigpurple.jpg" width="150" height="113" onClick="document.images.myImage.src = 'images/imageloading.gif'; document.images.preLoad.src = 'images/' + this.name">
<img src="images/green.jpg" name="biggreen.png" width="150" height="113" onClick="document.images.myImage.src = 'images/imageloading.gif'; document.images.preLoad.src = 'images/' + this.name">

Preloader (temporary image sized 0x0 pixels):
<img src="click.gif" onLoad="document.images.myImage.src=this.src" name="preLoad" width="0" height="0">

Big image:
<img src="images/click.gif" name="myImage" width="400" height="300">

What I did:
I included an invisible image named 'preLoad', that will temporary load the image wanted. It has an 'onLoad' event that, when the image is finished loading will set the source of 'myImage' to it's source.
When someone click on a thumbnail the source of 'myImage' will be set to 'images/imageloading.gif' to inform the user that the image is loading. It also sets the 'preLoad' image to what the user wanted to see. When loaded, 'myImage' is changed.

My last post only worked when loading bitmap images.

what i d propose :
1. user click on the thumbnail image
2. BigImage.src = low source of the thumbnail and you create new Image() object and set the src to the large source of the thumbnail
3. You start a timeout to check the new Image status load
this load status can be obtained with Object.Image.readyState (works in IE)
4. When load status is goog, turn BigImage.src=ObjectImage.src

It could be a solution



Very smart :-)

It works just fine. Only NS4 seems to have a problem probably caused by the hidden 0 x 0 image - but I think this will be solved by setting that to 1 x 1.

I will also have to set the thumbs in <a href></a> to make it more obvious that these thumbs can be clicked.

I tell you more as soon as I tested it more!
Until that, thank you very much / joergen
Here's the CSS way of making the cursor a hand, as if it was a link. In this example called handcursor

<style type="text/css">
.handcursor { cursor: hand; }

The IMG tags;
<IMG CLASS="handcursor" SRC...

...and You're very welcome.
After posting so many answers that proved wrong I just HAD to come up with a working one... hehe



I have now set up a demo that works fine in IE on PC & Mac

But I have these issues:

NS 6 =>
only loads the "imageLoading" message
the new image is loaded to the preloader, but after that nothing happens...

NS 4 =>
Nothing happens at all - I think NS does'nt support onClick event on the img tag
This can be solved by including <a href></a> around the thumbs.

Here's the code I use:
[I have set the preloader to 50 x 50 size just to observe that the new image is loaded]


<img src="images/collage/zoom00.jpg" lowsrc="images/collage/load.gif" name="myImage" width="275" height="209" id="myImage"><br><br>
<img src="images/collage/zoom00.jpg" onLoad="document.images.myImage.src=this.src" name="preLoad" width="50" height="50"><br><br>

<img src="images/collage/small01.jpg" name="zoom01.jpg" width="85" height="63" id="blue" onClick="document.images.myImage.src = 'images/collage/load.gif'; document.images.preLoad.src = 'images/collage/' + this.name">

<img src="images/collage/small02.jpg" name="test.jpg" width="85" height="63" id="purple" onClick="document.images.myImage.src = 'images/collage/load.gif'; document.images.preLoad.src = 'images/collage/' + this.name">

<img src="images/collage/small03.jpg" name="zoom03.jpg" width="85" height="63" id="green" onClick="document.images.myImage.src = 'images/collage/load.gif'; document.images.preLoad.src = 'images/collage/' + this.name">


You may see the demo at:

The second thumb will load an 2MB image!


a bit more information:

NS performs the first onLoad when the preLoader is loading, but the following onLoads are not done when we update the preLoader with a new src

No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

Points to BraveBrain Grade A

Please leave any comments here within the next seven days.
EE Cleanup Volunteer


that's ok thx / jastroem

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial