Slow load if css backgrounds with IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Slow load if css backgrounds with IE

Post by Luke »

I always run into this problem where if I use css to display a background image when a user hovers over a link, on SOME systems, IE will take about 1 second to load the image no matter what. It is very annoying. It doesn't do it on some systems, but when it does, it only does it in IE. I will give an example:

http://www.mc2design.com/sutton/test.htm

Try that link. Hover over the images, and let me know if takes a second to show the image (every time you hover over... even after image is cached)

If anybody knows what I am talking about... is there a fix?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

the first load took about .3 seconds...the other ones happend instantaneously.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

I checked it only with Firefox and it did take time. This is obvious, it takes time to load the image. What you can do is having one image which is actually a combination of the normal image and the hover image and then when someone hovers the link, you change the background's position.
Like this: http://www.alistapart.com/articles/slidingdoors2/
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Oren wrote:I checked it only with Firefox and it did take time. This is obvious, it takes time to load the image. What you can do is having one image which is actually a combination of the normal image and the hover image and then when someone hovers the link, you change the background's position.
Like this: http://www.alistapart.com/articles/slidingdoors2/
That's a really good idea... nice!

However, this is not what I am talking about... the initial load is not the issue. I have this problem all the time and it only happens with IE... It also seems that it only happens with slower computers. In IE... even after the image is cached, it takes about one second to show the background image. It's IRRITATING. I can't even recreate the problem, because it's not doing it now. It is so weird. Next time it happens, I'm going to post it here. I probably sound like a lunatic... but this really does happen.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

I don't think you get the idea of this technique, and I'm sure you haven't read the whole article so fast. Please read the whole article as this is exactly what you need :wink:
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Dude... I understand the article... I am reading it, and it may even solve my problem. I am just saying that this issue isn't the same as just taking a while to load the first time, but then loading fine after that. I know what causes that. My issue takes at least a second EVERY time you hover over it. I used to have the issue all the time... and so did a friend of mine... at shaffersoftware.com. It looks like he fixed it though. I'll ask him what he did and get back to you. I know what I'm talking about... sheesh!
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

You have to preload hover images with javascript.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

The Ninja Space Goat wrote:I am just saying that this issue isn't the same as just taking a while to load the first time, but then loading fine after that
Of course the problem is loading after... That's why the solution I gave you is what you need, as there is no need to load it after you hover 8)
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

astions wrote:You have to preload hover images with javascript.
I would keep myself away from JavaScript as long as there are other (and better) solutions :wink:
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

astions wrote:You have to preload hover images with javascript.
:evil: :evil: :evil: I know!! I know i have to preload images or use oren's ala solution. The problem is not caching!! How many times do i have to explain this?? Nevermind... forget I asked.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I have experienced similar problems with IE in the past. It could have something to do with the settings in IE to check for updated images on the server each time you hover over a link. Can't remember which option it is or were it is hidden. But it can be annoying.
See also http://www.fivesevensix.com/studies/ie6flicker/
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

matthijs wrote:I have experienced similar problems with IE in the past. It could have something to do with the settings in IE to check for updated images on the server each time you hover over a link. Can't remember which option it is or were it is hidden. But it can be annoying.
See also http://www.fivesevensix.com/studies/ie6flicker/
Finally... somebody who actually believes I'm having this problem... :lol:
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Finally... somebody who actually believes I'm having this problem...
Of course I believe you :) now don't forget your medicine tonight, okey?

This problem isn't even that rare. I have experienced it several times. Quite a pain in the *s, when you show a site to a client and they call you to ask what the flickering is about. If you look around the css-discuss list or google a bit you'll find plenty of discussions of this problem. And the article I linked to is a good read.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

matthijs wrote:
Finally... somebody who actually believes I'm having this problem...
Of course I believe you :) now don't forget your medicine tonight, okey?
:lol: :lol: :lol: haha I actually laughed out loud. That was great!
Post Reply