Dealing with multiple image load events

I have some code that creates uses a Template to create a bunch of img links. After the images load, I want the code to then manipulate the DOM and add more img links.

Is there some way to use Element.observe in order to know when all the images have loaded? I tried observing ‘load’ on the div that contains the images, but that didn’t work. There are a bunch of images (up to 1,000) so I don’t want to use Element.observe() on each image.

Element.observe(window, ‘load’, ...) seems to work once, but not after a second set of images are loaded.

Suggestions?

Hey Adam,

AFAIK, the load event indeed does not bubble, so event delegation wouldn’t be your ticket. You could switch from HTML injection to DOM injection, and use nodes as soon as you add them to the DOM?

From a higher standpoint, I fear for your page’s performance when I hear you’re creating up to 1,000 images in JS, client-side, using Templates. Can’t you offload that to the server? Or at least use chunks, not just a one-image-at-a-time approach…

‘HTH

thanks for the quick response.

what’s the difference between HTML injection and DOM injection? do you mean using inject()? Isn’t it DOM injection since I’m doing $(elt).insert?

I’m using the Truveo API to get a list of videos and then putting the images into a div. Here’s the line that does the Element.insert:

TVS.VideoSet.Video.each(function(vid){$(‘imageContainer’).insert(tpl.evaluate(vid))})

The each loop iterates up to 50 times. But I want to go back and fill the array (calling Truveo again) and then add the resulting images in the next round, after all the images have loaded from the current round.

You can see one version of this experiment here:
http://khido.com/ov/oevurt.html

I was also hoping to just keep around the last N images, sliding in new ones in some animated way. I’ve added a unique id (again from the Truveo result set) so I could build a hash of the existing images, and then just remove ones that aren’t in the new result set.

I don’t have control of the server since I’m using the Truveo API. I suppose I could use my web server to get the data from Truveo and then update the page that way. Maybe for version 2 of this exercise. But for now I’m using this as an exercise to learn Prototype using your excellent book. :-)

No I mean not using inject, or anything that relies on innerHTML, but building the actual DOM nodes, which you have many options for:

• new Element(…) lets you easily create a DOM element, complete with attributes and contents, and returns the DOM node for it: you can then script it.
• If you need to quickly build a complex DOM fragment, you may favor Scripty’s Builder capability over new Element, as it may well turn out less verbose, especially if you enable its shortcut syntaxes.

The book explains both, read it up! :-)