On Nov 13, 3:43 pm, Diodeus <[EMAIL PROTECTED]> wrote:
> I've been dynamically building a slideshow based on a list of image
> filenames. I use the following code to create thumbnails:
>
> $('placeholder').insert(new Element("img", {id:'something',
> src:myImage}))
>
> I would like to display a progress bar, so I'm going to count the
> number of images loaded as they go. To do this I was hoping to do
> something like this, but it doesn't work.
>
> $('placeholder').insert(new Element("img", {id:'something',
> src:myImage, onload:function(){alert("MOO")}}))
>
> After asking the question on stackoverflow.com one suggestion was
> this:
>
> $('placeholder').insert(new Element("img", { id: 'something',
> src:myImage}).observe('load', function() { // onload code here}));
>
> The problem is that attaching an event listener after the tag have
> been created is too late to catch the onload event. The thumbnail
> loads before the event handler is listening. The thumbnails are often
> only 3-4k in size.
>
> So how do I do this? I know I could create the element with the
> onload, then set the src separately later in the code, but I would
> prefer to do it all inside the new Element constructor.
Ah, the addiction of chaining : )
The problem is that `Element` constructor does `writeAttribute` for
every property of that second object you pass to it. It's easy to
"pull" that `writeAttribute('src', ...)` out of constructor (and put
after observer attachment):
$('placeholder').insert(new Element("img", { id: 'something' }).observe
('load', function() { /*... */ }).writeAttribute('src', myImage));
--
kangax
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
