Come to think of it, there's no need for the counter variable:

document.observe("dom:loaded", function() {
        $('main').update('<img src="shared/images/ajax-loader.gif"
width="100" height="100" alt="Ajax Loader">');
        var links = $$("div#thumbs a").each(function(link, i) {
                new Element('img').observe("load",function() {
                        if (++i == links.size()) {
                                $('main').update('<img src="' + links[0] + '" 
/>');
                        }
                }).writeAttribute('src', link);
        }).invoke('observe', 'click', function(event) {
                event.preventDefault();
                $('main').update('<img src="' + this.href + '" />');
        });
});


On Apr 29, 8:50 pm, solidhex <patr...@solidhex.com> wrote:
> And yet another iteration :D Hopefully this one doesn't cut off parts
> of the code.
>
> 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").each(function(link) {
>                 new Element('img').observe("load",function() {
>                         if (++counter == links.size()) {
>                                 $('main').update('<img src="' + links[0] + '" 
> />');
>                         }
>                 }).writeAttribute('src', link);
>         }).invoke('observe', 'click', function(event) {
>                 event.preventDefault();
>                 $('main').update('<img src="' + this.href + '" />');
>         });
>
> });
>
> On Apr 28, 10:57 pm, solidhex <patr...@solidhex.com> wrote:
>
> > Actually, it  can be trimmed down a bit further to match the jQuery
> > sample (again, I have no idea if this is an efficient or best way to
> > do this, just porting code :) )
>
> > 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").each(function(link) {
> >                 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 + '" />');
> >                 });
> >         });
>
> > });
>
> > On Apr 28, 10:18 pm, solidhex <patr...@solidhex.com> wrote:
>
> > > 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
-~----------~----~----~----~------~----~------~--~---

Reply via email to