Problem with IE7 - latency for a menu hover

[Skipjackrick]

Well,

 

I abandoned the CSS because of an issue I just couldn't figure out and went back to the good ole javascript.

 

To save myself html markup and time I just did a quick search and found one to use.

 

However...

 

Why does IE7 have the LAG? It is stuck loading something or doing something behind the scenes. Then if you right click the page it will begin working.

 

Anybody know?

 

here is a link to my page.

 

http://extremecoast.com/KW09/layoutdoc2.php

 

Maybe a little code for the gurus...The JS I am using.

 

//If the browser is W3 DOM compliant, execute setImageSwaps function
if (document.getElementsByTagName && document.getElementById) {
if (window.addEventListener) window.addEventListener('load', setImageSwaps, false);
else if (window.attachEvent) window.attachEvent('onload', setImageSwaps);
}

//When document loads, apply the prepareImageSwap function to various images with our desired settings
function setImageSwaps() {
//Hover with restore, most basic usage - for any image in document.body that are not yet processed (function accepts elements,too)
prepareImageSwap(document.body);
//Note that once an image is processed, it wont be processed again, so you should set more specific images first, e.g. document.body, as it is the grand
//container, has to be processed last.
}


//The following is the function that do the actual job

function prepareImageSwap(elem,mouseOver,mouseOutRestore,mouseDown,mouseUpRestore,mouseOut,mouseUp) {
//Do not delete these comments.
//Non-Obtrusive Image Swap Script by Hesido.com
//V1.1
//Attribution required on all accounts
if (typeof(elem) == 'string') elem = document.getElementById(elem);
if (elem == null) return;
var regg = /(.*)(_nm\.)([^\.]{3,4})$/
var prel = new Array(), img, imgList, imgsrc, mtchd;
imgList = elem.getElementsByTagName('img');

for (var i=0; img = imgList[i]; i++) {
	if (!img.rolloverSet && img.src.match(regg)) {
		mtchd = img.src.match(regg);
		img.hoverSRC = mtchd[1]+'_hv.'+ mtchd[3];
		img.outSRC = img.src;
		if (typeof(mouseOver) != 'undefined') {
			img.hoverSRC = (mouseOver) ? mtchd[1]+'_hv.'+ mtchd[3] : false;
			img.outSRC = (mouseOut) ? mtchd[1]+'_ou.'+ mtchd[3] : (mouseOver && mouseOutRestore) ? img.src : false;
			img.mdownSRC = (mouseDown) ? mtchd[1]+'_md.' + mtchd[3] : false;
			img.mupSRC = (mouseUp) ? mtchd[1]+'_mu.' + mtchd[3] : (mouseOver && mouseDown && mouseUpRestore) ? img.hoverSRC : (mouseDown && mouseUpRestore) ? img.src : false;
			}
		if (img.hoverSRC) {preLoadImg(img.hoverSRC); img.onmouseover = imgHoverSwap;}
		if (img.outSRC) {preLoadImg(img.outSRC); img.onmouseout = imgOutSwap;}
		if (img.mdownSRC) {preLoadImg(img.mdownSRC); img.onmousedown = imgMouseDownSwap;}
		if (img.mupSRC) {preLoadImg(img.mupSRC); img.onmouseup = imgMouseUpSwap;}
		img.rolloverSet = true;
	}
}

function preLoadImg(imgSrc) {
	prel[prel.length] = new Image(); prel[prel.length-1].src = imgSrc;
}

}

function imgHoverSwap() {this.src = this.hoverSRC;}
function imgOutSwap() {this.src = this.outSRC;}
function imgMouseDownSwap() {this.src = this.mdownSRC;}
function imgMouseUpSwap() {this.src = this.mupSRC;}

 

HTML markup example...nothing to it really?

 

<a href="http://www.extremecoast.com"><img src="http://www.extremecoast.com/KW09/layout/menu1_nm.jpg" border="0" alt="" /></a>

<a href="http://www.extremecoast.com"><img src="http://www.extremecoast.com/KW09/layout/menu2_nm.jpg" border="0" alt="" /></a>


<a href="http://www.extremecoast.com"><img src="http://www.extremecoast.com/KW09/layout/menu3_nm.jpg" border="0" alt="" /></a>