The following seems to work:
document.observe("dom:loaded", function() {
$('main').update('<img src="shared/images/ajax-loader.gif"
width="100" height="100" alt="Ajax Loader">');
var counter = 0;
var links = $$("div#thumbs a");
links.each(function(link) {
var img = new Element('img').observe("load",function() {
if (++counter == links.size()) {
$('main').update('<img src="' + links[0] + '"')
}
}).writeAttribute('src', link);
link.observe("click", function(event) {
event.preventDefault();
$('main').update('<img src="' + link + '" />');
});
});
});
the only difference is that I can't chain the onclick observe to the
each enumerator as in jQuery. Here is the full working version:
http://www.solidhex.com/code-samples/prototype/gallery.html
On Apr 28, 8:59 pm, solidhex <patr...@solidhex.com> wrote:
> It's to preload the images that are referenced by the links. Perhaps a
> working sample of the jquery example might be more
> clear:http://www.solidhex.com/code-samples/jquery/gallery.html
>
> On Apr 28, 7:21 pm, RobG <rg...@iinet.net.au> wrote:
>
> > On Apr 29, 10:25 am, solidhex <patr...@solidhex.com> wrote:
>
> > > Hi all
>
> > > I am trying to do something similar with Prototype as compared to this
> > > snippet of code down below:
> > [...]
> > > The idea is, all the linked images pre-load while showing an animated
> > > gif. Then, once the images are finished loading, you can click for a
> > > standard js image swap. I am struggling just to get the pre-loading
> > > portion working though. Here's what I was tinkering with:
>
> > It seems you simply want to display the loading gif while waiting for
> > the body load event to fire, so why not do exactly that? Set your
> > loading GIF as the first image to display, perhaps absolutely
> > positioned in an obvious location, then when the load event occurs,
> > remove it.
>
> > > document.observe("dom:loaded", function() {
>
> > So no loading gif while the html loads, only while the images load?
>
> > [...]
>
> > > Any suggestions? thanks in advance!
>
> > Most (all?) browsers show an animation to indicate that the page is
> > still loading, and icons to show images that haven't loaded yet (among
> > other things). Why do they need this?
>
> > --
> > Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
