7 replies to this topic

[Slightly Wonky Robob]

Me Again :-D

Well im working on an image gallery, there are thumbnails along the top, and the main image in the bottom, when you click on a thumb, the main image changes. (i've got that far). Now is it possible (and if so how?) to display a loading animation when you click the thumb until the main image has loaded, then hide the animation again. I tried using the onload property, but it didn't appear to work

[G-sus]

Alias, on 13 Dec 2007, 0:20, said:

G-sus, on 13 Dec 2007, 10:13, said:

definately it is possible.
but since i cant write html, dont ask me how...

That's not what your meant to do, you say - "I'll tell you, if you -b".

counts for javascript too...

[Slightly Wonky Robob]

Gsus, this isn't irc or the SYD. Please make constructive comments/statements.

[Chrizz]

go check this out.


http://www.huddletog...jects/lightbox/

[Slightly Wonky Robob]

i've seen the use of that in the past... the only problem is there is a lot of stuff to look through... and when you don't really like javascript in the first place, you gonna despise after searching through all that =0

EDIT: It appears that my script does work, once the image has loaded the anim goes, however this only works for the initial load. When i change the source, it doesn't re initiate the code, so i guess i need to put the onload even on a separate hidden image or something like that.

Edited by Bob, 16 December 2007 - 22:22.

[Felix Lockhart]

I'ver never actually done anything like this before, and I don't have time to put together a working demonstration, but if it were me, I'd pre-load the animation image, then place it in its proper location with an onclick handler. At that point, you background-load the image that will be displayed (same technique as pre-loading), and once it's completed loading (not sure how to measure this, unfortunately), swap it with the animation or something. It's definitely possible, AJAX applications do it all the time. Perhaps you could post the relevant code you already have?

[Slightly Wonky Robob]

thats not the problem though, i got the loading animation working on the initial load of the image. What i did was create a div (semi transparent) with the animation on top. When the image has finished loading the div is hidden, displaying the image (using onload event). However the problem is, when you click on a thumbnail, the source of the main image is changed and the loading animation/div is made visible again, but this means the onload event doesn't work anymore.

The other thing is i'm pretty sure i have to do it by this method, as in one of my previous threads we/i arrived at the conclusion that events cant be added/changed, meaning if i create a new image and hide the old one means i cant add events to the image (which i use to load the image in a new tab, full-size)

[Slightly Wonky Robob]

Yes! I got it working for those who may be interested, here's how i did it:

First off i had a function that was called upon when clicking the thumbnail, via onclick. The function writes the image that needs to be loaded into a hidden div, with an unload command calling another function, the first function also make the loading animation visible (fades it in with anothher function i made, but thats just artsy ).

Once the image has finished loading, the original image is swapped with the newly loaded image and the loading animation is hidden again.

Looks pretty damn cool