By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,317 Members | 1,339 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,317 IT Pros & Developers. It's quick & easy.

slow preload for IE

P: n/a
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'");

}
}
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Ju*********@graduates.iti.com (jmhill) wrote:
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...6jsmtheval.asp

Regards,
Steve
Jul 20 '05 #2

P: n/a

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[i]))!=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[i])&&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[i].indexOf("#")!=0){
d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];
}
}
}
}

Thanks for any help

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.