Need help with image loading events

Hi,
I have this script (taken from [url]http://www.wait-till-i.com/2007/07/10/return-of-the-http-overhead-delay-this-time-without-a-server-side-component/[/url]).

[code]delayHTTPoverhead = function() {
var parentID = ”;
var avtClass = ”;
function ri() {
var img = parentID !== ” ? document.getElementById(parentID).getElementsByTagName(‘img’) : document.getElementsByTagName(‘img’);
var rep = /.*#/;
for (var i = 0; img[i]; i++) {
var src = img[i].src;
if (src.indexOf(‘#’) != -1 && img[i].className.indexOf(avtClass) !== -1) {
img[i].src = src.replace(rep, ”);
};
};
}
var o = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = ri;
} else {
window.onload = function() {
if (o) {
o();
};
ri();
};
};
} ();[/code]

That work’s with image tags like this ones:

[code]<img src=”lowres1.jpg#highres1.jpg” />
<img src=”lowres2.jpg#highres2.jpg” />[/code]

I need help with adding a simple feature to this script..
I want the script to replace the images [b]one-by-one[/b]. So it replaces the source of the first image, waits till the “highres” image loads and then moves to the next image and so on…
At the very end, when all the highres images are loaded i also need to execute another function, but this should be easy i guess…

I’d really appreciate any help with this!
Thanks,
Mark.

Also in #JavaScript _↴