Images will not preload in IE 6

Forum Moderators: open

Message Too Old, No Replies

Images will not preload in IE 6

axisoftime

4:59 pm on Jan 31, 2003 (gmt 0)

Images will not preload in IE 6. I've seen this error discussed all over the web, but have yet to find a solution. Many claim it has to do with absolute vs. relative URL paths - not true. Our sites have relative URLs, but the images refuse to preload in IE 6 resulting in a rollover lag for dial-up users. Preload is fine in NN and IE for Mac. Can't find anything in Microsoft's knowledge base. I've tried many JavaScript variations. Can anyone offer some insight into this issue?

Here is some of the affected code - very basic preload script:

<SCRIPT language="JavaScript">
<!--

realestate = new Image();
realestate.src = "Images/nav/ER-Real-Estate-On.jpg";

-->
</SCRIPT>
</HEAD>

Any and all info is appreciated.

DrDoc

7:22 pm on Jan 31, 2003 (gmt 0)

Just some ideas .. have you tried putting the image in the same folder as the HTML document? Have you tried using lowercase-only names?

It sure puzzles me!

tedster

7:35 pm on Jan 31, 2003 (gmt 0)

I've had success in IE6 by including the width and height of the images in the preload script.

offimage=new Image(120,40)
onimage=new Image(120,40)

offimage.src="off.gif"
onimage.src="onimage.gif"

DrDoc

7:51 pm on Jan 31, 2003 (gmt 0)

Really? And then it works just fine?

Wow! I never knew you could do that :o
Thanks ;)

tedster

8:16 pm on Jan 31, 2003 (gmt 0)

I think different builds of IE6 may work differently on this. It also may be related to something, somewhere in that awful Internet Tools laundry list. I never actually pinned it down 100%. But the bug has something to do with the way the browser checks for cached images, and the image dimensions do help.

I've stopped designing with image rollovers and gone completely to CSS hover behaviors because I'm not sure that caching works predictably on IE anymore.

axisoftime

8:30 pm on Jan 31, 2003 (gmt 0)

Thanks for the replys. Unfortunately none of these ideas seem to work.

tedster - I defined image dimensions in the script, but I am not preloading the "off" state images as you suggested. This doesn't seem necessary as the off state is already loaded just from D/L-ing the page. Do you disagree?

This is so frustrating.

tedster

8:41 pm on Jan 31, 2003 (gmt 0)

You're right, there's no reason to preload the "off" state that I know of -- as long as the image tag itself is loading the image. I wrote that post copying one of my legacy code snippets.

Thinking a bit further, on a slow connection, preloading both states from the HEAD would give you better shot at having a visually functioning menu early on in the page rendering process. But that's about it.

Unfortunately none of these ideas seem to work

It wouldn't surprise me that adding image dimensions doesn't fix the problem in all builds of IE6. I have an early build which I only haul out for page testing or PageRank checking, and it does work there.

Maybe I'll download a new build and poke around some more.

axisoftime

8:41 pm on Jan 31, 2003 (gmt 0)

Also, I've tried scripts from other sites that work in IE 6, but they still won't preload on my site. It doesn't make sense.

I hear you about CSS... unfortunately the Marketing Dept. still insists on having smooth, flawless image text. They won't take my advice... what the heck do I know? I'm only the webmaster!

Drinks are on me if someone can me with this issue.

DrDoc

8:51 pm on Jan 31, 2003 (gmt 0)

Looking a little bit closer, I think I found what the problem is ;)

I concentrated on the script, when the actual problem lies in the img tag!

Change this

<a href="realestate.htm" onmouseover="realestate.src='Images/nav/ER-Real-Estate-On.jpg';" onmouseout="realestate.src='Images/nav/ER-Real-Estate-Off.jpg';"><img src="Images/nav/ER-Real-Estate-Off.jpg" name="realestate" border="0" width="77" height="13"></a>

to this

<a href="realestate.htm" onmouseover="[b]theimg[/b].src=[b]realestate.src[/b];" onmouseout="[b]theimg[/b].src='Images/nav/ER-Real-Estate-Off.jpg';"><img src="Images/nav/ER-Real-Estate-Off.jpg" name="[b]theimg[/b]" border="0" width="77" height="13"></a>

You can't use the same name for the variable and the image ;)

amznVibe

8:51 pm on Jan 31, 2003 (gmt 0)

Just out of curiousity, what is the size in bytes or Kbytes for these images?

IE6 has an undeniable problem with small images under a couple Kbytes and this might come into play with reloading rollovers as well.

axisoftime

9:04 pm on Jan 31, 2003 (gmt 0)

DrDoc - I think you can use the same name, as the code successfully works in Netscape and IE-Mac - but I could be mistaken. At any rate, I used your code suggestion but it still won't preload in IE 6.

amznVibe - my rollover images are currently 1K - 3K.

axisoftime

3:37 pm on Feb 28, 2003 (gmt 0)

I've tried dozens of scripts from other sites without success, so I'm thinking the issue is server-side. Is this possible? Something in IIS?

HocusPocus

8:25 pm on Feb 28, 2003 (gmt 0)

Could the problem be related to how your browser is setup?

I know this doesn't resolve the issue but if your Options are such that the browser checks for Newer versions of stored pages
'every visit to the page'
then I suspect this is the problem.

If you change this option to
'automatically'
the problem should go away.

I know this doesn't resolve the problem, it might just help to solve it.

axisoftime

8:48 pm on Feb 28, 2003 (gmt 0)

Yes, I have it set up to "automatically" - still no dice. It's got to be a server thing, the script I'm using is the same ol' script I've used on every other site.

I wish marketing would take my advice for using CSS navigation... then I wouldn't have this problem!

macrost

10:51 pm on Feb 28, 2003 (gmt 0)

Try this:


function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {;
document[arguments[0]].src = arguments[1];
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
search_button_01_over = newImage("images/search-button_01-over.gif");
search_button_01_down = newImage("images/search-button_01-down.gif");
preloadFlag = true;
}
}

as I don't have a dial up or know of anyone with one, I'm not sure on the performance of this. I have IE6 SP1

[edited by: tedster at 3:48 am (utc) on Mar. 4, 2003]
[edit reason] remove url [/edit]

axisoftime

7:03 pm on Mar 3, 2003 (gmt 0)

Hi macrost, this doesn't work on my site. While I'm sure it works in principle (I've tried the same basic function with success in other sites), for some reason the images won't preload on the site I'm working on right now. Originally I was thinking it could be a setting on the server, but this is client side script... so that doesn't make sense either.