slow preload for IE

[jmhill]

Has anyone else had this issue? Basically, the preload of images for a
rollover effect for the navigation is really really slow when using IE
6.0 but when i view the site using Netscape, it's fast like it should
be(no lag!)

My problem is that since 96% of users use IE, i need to figure a way
to fix this. Below is the javascript currently being used. The
arguments are passed in before the script is called.

MM_preloadImages(
'<%=assets_path%>/left_nav/manage_view_wthr_on.gif',
'<%=assets_path%>/left_nav/manage_admin_guide_on.gif',
'<%=assets_path%>/left_nav/manage_terms_cond_on.gif',
'<%=assets_path%>/left_nav/manage_reports_on.gif',
'<%=assets_path%>/left_nav/manage_account_info_on.gif',
)


function gn_rollover_preload(){
//preloads middle images for the navigation
if (document.images){
var argLength = gn_rollover_preload.arguments.length;

for (arg=0; arg < argLength; arg++){
eval(arguments[arg] + "_off = new Image()");
eval(arguments[arg] + "_on = new Image()");
eval(arguments[arg] + "_left = new Image()");
eval(arguments[arg] + "_right = new Image()");

eval(arguments[arg] + "_off.src = '" + ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_off.gif'");
eval(arguments[arg] + "_on.src = '" + ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_on.gif'");
eval(arguments[arg] + "_left.src = '" + ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_left.gif'");
eval(arguments[arg] + "_right.src = '" + ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_right.gif'");
}

// Now Preload all "corner" images for faster swapping
corner1 = new Image();
corner2 = new Image();
corner2_both = new Image();
corner3 = new Image();
corner3_both = new Image();
corner4 = new Image();
corner4_both = new Image();
corner5 = new Image();

corner1.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_1.gif'");
corner2.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_2.gif'");
corner2_both.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner2_both.gif'");
corner3.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_1.gif'");
corner3_both.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner3_both.gif'");
corner4.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_1.gif'");
corner4_both.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner4_both.gif'");
corner5.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_2.gif'");

}
}

 

[Steve van Dongen]

Has anyone else had this issue? Basically, the preload of images for a
rollover effect for the navigation is really really slow when using IE
6.0 but when i view the site using Netscape, it's fast like it should
be(no lag!)

My problem is that since 96% of users use IE, i need to figure a way
to fix this. Below is the javascript currently being used. The
arguments are passed in before the script is called.

MM_preloadImages(
'<%=assets_path%>/left_nav/manage_view_wthr_on.gif',
'<%=assets_path%>/left_nav/manage_admin_guide_on.gif',
'<%=assets_path%>/left_nav/manage_terms_cond_on.gif',
'<%=assets_path%>/left_nav/manage_reports_on.gif',
'<%=assets_path%>/left_nav/manage_account_info_on.gif',
)


function gn_rollover_preload(){
//preloads middle images for the navigation
if (document.images){
var argLength = gn_rollover_preload.arguments.length;

for (arg=0; arg < argLength; arg++){
eval(arguments[arg] + "_off = new Image()");
eval(arguments[arg] + "_on = new Image()");
eval(arguments[arg] + "_left = new Image()");
eval(arguments[arg] + "_right = new Image()");

eval(arguments[arg] + "_off.src = '" + ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_off.gif'");
eval(arguments[arg] + "_on.src = '" + ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_on.gif'");
eval(arguments[arg] + "_left.src = '" + ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_left.gif'");
eval(arguments[arg] + "_right.src = '" + ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_right.gif'");
}

Don't use eval. It's slow an error prone. I've seen only 2 cases
where eval was required and everything else can be written better a
different way.

var preloadedImgs = new Object();
for (arg=0; arg < argLength; arg++)
{
preloadedImgs[arguments[arg] + "_off"] = new Image()";
preloadedImgs[arguments[arg] + "_on"] = new Image()";
preloadedImgs[arguments[arg] + "_left"] = new Image()";
preloadedImgs[arguments[arg] + "_right"] = new Image()";

preloadedImgs[arguments[arg] + "_off"].src = ASSET_PATH_HEADER
+
"button_nav_"+ arguments[arg] + "_off.gif";
preloadedImgs[arguments[arg] + "_on"].src = ASSET_PATH_HEADER
+
"button_nav_"+ arguments[arg] + "_on.gif";
preloadedImgs[arguments[arg] + "_left"].src =
ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_left.gif";
preloadedImgs[arguments[arg] + "_right"].src =
ASSET_PATH_HEADER +
"button_nav_"+ arguments[arg] + "_right.gif";
}

// Now Preload all "corner" images for faster swapping
corner1 = new Image();
corner2 = new Image();
corner2_both = new Image();
corner3 = new Image();
corner3_both = new Image();
corner4 = new Image();
corner4_both = new Image();
corner5 = new Image();

corner1.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_1.gif'");
corner2.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_2.gif'");
corner2_both.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner2_both.gif'");
corner3.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_1.gif'");
corner3_both.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner3_both.gif'");
corner4.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_1.gif'");
corner4_both.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner4_both.gif'");
corner5.src = eval("'" + ASSET_PATH_HEADER +
"button_nav_corner_2.gif'");

Get rid of eval. It does absolutely nothing here but slow you down.
http://msdn.microsoft.com/library/en-us/script56/html/js56jsmtheval.asp

Regards,
Steve

 

[Justin Hill]

Thanks for the input Steve. After doing a little deeper digging I'm
guessing that the problem is a little deeper than the preload. Since the
lag time appears on the rollover effects of the images, it appears the
javascript functions for the onMouseOver and onMouseOut may be to blame.
Take a look at these functions and let me know if anything seems wierd
that might cause the lag in IE but not Netscape.

Thanks

onMouseOver="MM_swapImage('Image2','','/left_nav/manage_view_state_on.gi
f',0)" >

function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3){
if ((x=MM_findObj(a))!=null){
document.MM_sr[j++]=x;
if(!x.oSrc){
x.oSrc=x.src;
}
x.src=a[i+2];
}
}
}

onMouseOut="MM_swapImgRestore()"

function MM_swapImgRestore() {
var i,x,a=document.MM_sr;
for(i=0;a&&i< a.length&&(x=a)&&x.oSrc;i++){
x.src=x.oSrc;
}
}

And if that wasn't enough, here's the real preload that gets called:

function MM_preloadImages() {
var d=document;
if(d.images){
if(!d.MM_p){
d.MM_p=new Array();
}
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i< a.length; i++){
if (a.indexOf("#")!=0){
d.MM_p[j]=new Image;
d.MM_p[j++].src=a;
}
}
}
}

Thanks for any help