Need help with image loading events
Hi,
I have this script (taken from
http://www.wait-till-i.com/2007/07/10/return-of-the-http-overhead-delay-this-time-without-a-server-side-component/).
-
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();
};
};
} ();
That work's with image tags like this ones:
-
<img src="lowres1.jpg#highres1.jpg" />
<img src="lowres2.jpg#highres2.jpg" />
I need help with adding a simple feature to this script using jquery..
I want the script to replace the images
one-by-one. 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.