Page 1 of 1

Slow load if css backgrounds with IE

Posted: Thu Jun 29, 2006 10:56 am
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?

Posted: Thu Jun 29, 2006 11:14 am
by Burrito
the first load took about .3 seconds...the other ones happend instantaneously.

Posted: Thu Jun 29, 2006 11:15 am
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/

Posted: Thu Jun 29, 2006 11:20 am
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.

Posted: Thu Jun 29, 2006 11:24 am
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:

Posted: Thu Jun 29, 2006 11:36 am
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!

Posted: Thu Jun 29, 2006 11:40 am
by Benjamin
You have to preload hover images with javascript.

Posted: Thu Jun 29, 2006 11:43 am
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)

Posted: Thu Jun 29, 2006 11:44 am
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:

Posted: Thu Jun 29, 2006 12:00 pm
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.

Posted: Thu Jun 29, 2006 12:04 pm
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/

Posted: Thu Jun 29, 2006 12:30 pm
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:

Posted: Thu Jun 29, 2006 1:02 pm
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.

Posted: Thu Jun 29, 2006 2:09 pm
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!