hover delay on toggleclass with jquery?

can someone please go to this site and tell me why there is a slight delay the first time you hover over one of the top links? notice it turns black then purple, then after thatm the function toggles normally.

I am useing this:

$('#minus .header .links .link').live('hover', function () {
	
		if($(this).hasClass('linkCold'))
			{
				$(this).addClass('linkHover').removeClass('linkCold');
			}
			else if($(this).not('.linkHover'))
			{
				$(this).addClass('linkCold').removeClass('linkHover');
			}
			
	});

Thanks

Judson.
LVL 3
judsonmusicAsked:
Who is Participating?
 
Mark BradyPrincipal Data EngineerCommented:
Yes something like that. Just make a div like you have suggested and load into it all the background images and make that the very first thing that happens so the images will be sitting in the users cache by the time the page is loaded. It should remove the flicker or slight delay we are seeing.
0
 
nishant joshiTechnology Development ConsultantCommented:
you can directly use delay function...

$('#minus .header .links .link').live('hover', function () { 
      
            if($(this).hasClass('linkCold'))
                  {
                        $(this).addClass('linkHover').delay(1000).removeClass('linkCold');
                  }
                  else if($(this).not('.linkHover'))
                  {
                        $(this).addClass('linkCold').delay(1000).removeClass('linkHover');
                  }
                  
      });

Open in new window

0
 
judsonmusicAuthor Commented:
Did you read my question? Also here is a link to view th problem,

http://prestigesalonproducts-com.securec32.ezhostingserver.com/index.cfm
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Mark BradyPrincipal Data EngineerCommented:
I just tested that link using Chromium and there was no delay at all. Have you fixed the problem? Also works perfect with no delay in Firefox. Addclass and removeClass should work instantly with no delay especially if you have not added a delay to it. My guess is the initial problem you were/are having is due to the browser you are using and the speed of your connection. It may have taken a little but of time to download the rollover image perhaps. In any case, it is working fine with the two browsers I mentioned.
0
 
judsonmusicAuthor Commented:
on this link :http://prestigesalonproducts.com/

The first time you hover over one of the links you will see a very slight "black out" ot 100ms delay, after that the hovering works instantly on all of the other ones.

Judson
0
 
Mark BradyPrincipal Data EngineerCommented:
Yes I see it now and I stand by my thoughts earlier. This looks to me like an image loading delay. It is not a coding issue or it would do it all the time. I just dumped my cache and reloaded that page and it had the same delay. It is a typical delay of the browser doing what you have asked.

1: read some code on the "hover" or "mouseover" event
2: Go to the folder containg the new "background" image and load the new image

Although most CPU's are so fast and we can't see what they are doing, if you don't have a lightning quick connection it will have a slight delay which is what you/we are seeing. It doesn't matter if you (yourself) has a super fast internet connection, what matters is how fast the "server's" connection is. If this is on a shared server it will be dealing with traffic as well so there are a lot of issues to take into account when tracking how fast a page is served up to ones browser.
What I think you should try is to preload those images. Make a small function that loads the background image as it's first priority. I would load it into a hidden div. Run that function on page load ie: <body onload="loadImages()"> so it will already be in your cache by the time the page is fully loaded and there will be no more delay when you hover over the links.
0
 
judsonmusicAuthor Commented:
So would you just do like $('#hiddendiv').html('<img src="my image"><img src="myimage2">');

Like that?

I havent used preloading of images since macro media used to do it for me in JavaScript lol.

Thanks

Judson
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.