Preload problems with changing images on IE6 on some Windows Computers [Archive]

Click to See Complete Forum and Search --> : Preload problems with changing images on IE6 on some Windows Computers

jellyjulie

07-30-2004, 12:10 PM

Hi,

I'm trying to change images on a website without reloading the whole page and use the following code to preload the images:

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
pic_moon2_click = newImage("images/moonpic2.jpg");
pic_moon3_click = newImage("images/moonpic3.jpg");
pic_moon4_click = newImage("images/moonpic4.jpg");
one_click = newImage("images/1.gif");
two_click = newImage("images/2r.gif");
three_click = newImage("images/3r.gif");
flour_click = newImage("images/4r.gif");
two_caps_click = newImage("images/mooncaps2.gif");
three_caps_click = newImage("images/mooncaps3.gif");
four_caps_click = newImage("images/mooncaps4.gif");
preloadFlag = true;
}
}

to change the images I use this code:

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src =
changeImages.arguments[i+1];
}
}
}

when I click on the field that should make the images change (images in several places are supposed to change at the same time, including the one I'm clicking) I hand over two variables for each imagefield, the name of the image tag that I want to change and the source of the new image, I separate each group of two variables by a comma.

On my Mac and various other platforms it seems to work fine but on certain Windows computers (IE6), not on all, the new images don't load, but after clicking the button the image td is empty. If I right click into the td and click on "Load Image" the right image loads though.

I tried to look at the page locally and then it all works fine. So I thought it must have something to do with preloading the images.

After that I tried a different code that doesn't use a preload function but makes an object of each image that will be called on later. But for some reason that still doesn't work on some computers.

var Normal1 = new Image();
Normal1.src = "images/1.gif";
var Highlight1 = new Image();
Highlight1.src = "images/1r.gif";
var Normal2 = new Image();
Normal2.src = "images/2.gif";
var Highlight2 = new Image();
Highlight2.src = "images/2r.gif";
var Pic1 = new Image();
Pic1.src = "images/gbpic1.jpg";
var Pic2 = new Image();
Pic2.src = "images/gbpic2.jpg";
var Caps1 = new Image();
Caps1.src = "images/gbcaps1.gif";
var Caps2 = new Image();
Caps2.src = "images/gbcaps2.gif";

function ChangeImage(ImgNr,Imgobjekt) {
window.document.images[ImgNr].src = Imgobjekt.src;
}

I have no idea what else to try because there doesn't really seem to be anything wrong with the code. Has anyone here experienced problems like this on Windows platforms?

Sorry this is a bit long but I don't know how else to describe it...:-)

Thanks
Julia

JacksonCochrane

08-01-2004, 04:40 PM

Julia:
I couldn't understand from your example code, exactly what you were trying to swap with what. There were conflicting image names, or sets of images. Anyway,I did what I could with it. Here's an example of 4 images, click one, they swap to its alternate, click again, they swap back.
If this helps, great. If not, I'll need more information.

<HTML>
<Head>
<Script Language=JavaScript>

var imgPath = "Images/"
var isSwap = false;

imgs = new Object;
imgs.Normal = "1.gif |2.gif"
imgs.Highlight = "1r.gif |2r.gif"
imgs.Pic = "gbpic1.jpg |gbpic2.jpg"
imgs.Caps = "gbcaps1.gif |gbcaps2.gif"

for (each in imgs)
{imgs[each] = imgs[each].split("|")}

function swapImages(){

if (isSwap == false)
{
document.getElementById(1).src = imgPath+imgs.Normal[1];
document.getElementById(2).src = imgPath+imgs.Highlight[1];
document.getElementById(3).src = imgPath+imgs.Pic[1];
document.getElementById(4).src = imgPath+imgs.Caps[1];
isSwap = true;
}
else
{
document.getElementById(1).src = imgPath+imgs.Normal[0];
document.getElementById(2).src = imgPath+imgs.Highlight[0];
document.getElementById(3).src = imgPath+imgs.Pic[0];
document.getElementById(4).src = imgPath+imgs.Caps[0];
isSwap = false;
}
}
</Script>
</Head>
<Body>
<IMG Src='Images/1.gif' id='1' onClick="swapImages()">
<BR>
<IMG Src='Images/1r.gif' id='2' onClick="swapImages()">
<BR>
<IMG Src='Images/gbpic1.jpg' id='3' onClick="swapImages()">
<BR>
<IMG Src='Images/gbcaps1.gif' id='4' onClick="swapImages()">
</Body>
</HTML>

jellyjulie

08-02-2004, 11:19 AM

Thanks for your reply,
Unfortunately I don't think that your suggestion will work for this specific website because I won't only have to swap two pictures.
Here is a link to one of the pages I'm working on:
http://www.woed.com/newsite/projects/pim.html
By clicking the numbers below the pictures I'm clickung through the 8 different pictures of the the project. So if I click the number 2, the picture is supposed to change, the caption below the picture is supposed to change and the number 2 is turning red while 1 turns gray.

http://www.woed.com/newsite/projects/bam.html
On this page I tried a different code (the second one on my intial post) but still on some windows computer it does't work...

Hope you get a better idea now of what my problem is :)

JacksonCochrane

08-02-2004, 01:43 PM

Please try this with your existing path and images. It needn't be so complex.

<HTML>
<Head>
<Script Language=JavaScript>

var imgPath = "Images/";
var prev = "1";

imgs = new Object;
imgs.Pic = "pimpic1.jpg |pimpic2.jpg |pimpic4.jpg |pimpic6.jpg |pimpic7.jpg |pimpic8.jpg |pimpic5.jpg |pimpic3.jpg";
imgs.Cap = "pimcaps1.gif |pimcaps2.gif |pimcaps4.gif |pimcaps6.gif |pimcaps7.gif |pimcaps8.gif |pimcaps5.gif |pimcaps3.gif";
imgs.redNmbr = "1r.gif |2r.gif |3r.gif |4r.gif |5r.gif |6r.gif |7r.gif |8r.gif";
imgs.blackNmbr = "1.gif |2.gif |3.gif |4.gif |5.gif |6.gif |7.gif |8.gif";

for (each in imgs){imgs[each] = imgs[each].split("|")}

function swapInfo(curr){

isPic.src = imgPath+imgs.Pic[curr-1];
isCap.src = imgPath+imgs.Cap[curr-1];
prevStr = imgPath+prev+".gif"
document.getElementById(prev).src = prevStr;
tmp = curr.toString();
redStr = imgPath+tmp+"r"+".gif";
document.getElementById(curr).src = redStr;
prev = curr;
alert(prevStr)
alert(redStr);
alert(isPic.src);
alert(isCap.src);
}

</Script>
</Head>
<Body>
<Table align=center cellpadding=0 border=1>
<TR>
<TD colspan=3><IMG Src='Images/pimpic1.jpg' width=329 height=267 id='isPic'></TD>
</TR>
<TR>
<TD rowspan=3><IMG Src='Images/pimcaps1.gif' width=249 height=30 id='isCap'></TD>
</TR>
<TR>
<TD width=19 height=15><IMG Src='Images/1r.gif' id='1' onClick="swapInfo(1)"></TD>
<TD width=19 height=15><IMG Src='Images/2.gif' id='2' onClick="swapInfo(2)"></TD>
<TD width=19 height=15><IMG Src='Images/3.gif' id='3' onClick="swapInfo(3)"></TD>
<TD width=19 height=15><IMG Src='Images/4.gif' id='4' onClick="swapInfo(4)"></TD>
</TR>
<TR>
<TD width=19 height=15><IMG Src='Images/5.gif' id='5' onClick="swapInfo(5)"></TD>
<TD width=19 height=15><IMG Src='Images/6.gif' id='6' onClick="swapInfo(6)"></TD>
<TD width=19 height=15><IMG Src='Images/7.gif' id='7' onClick="swapInfo(7)"></TD>
<TD width=19 height=15><IMG Src='Images/8.gif' id='8' onClick="swapInfo(8)"></TD>
</TR>
</Table>
</Body>
</HTML>

jellyjulie

08-03-2004, 11:27 AM

Thanks for the suggestions but that doesn't work on Netscape now... I tried to put the onClick command outside the img tag into a link but that still didn't work

Here's an answer I got back yesterday from someone else:

I believe you are talking about a well-known cache-related bug in IE 5/5.5/6 on Windows. Basically it has problems with caching the images. This bug typically only occurs when "Every visit to the page" is set for checking for new versions in the cache settings (e.g. Tools->Internet Options->Temporary Internet Files->Settings). But some users of customized IE versions have also
experienced the problem when "Automatically" is set. However, it is sure that when "Never" is selected the problem doesn't occur. This is why you have noted the problem on some computers and not on others.

Have you heard of this problem before? It seems like there is nothing I can do about it. I can't tell everybody who visits our page to first change his Preferences...
But I can't imagine that nobody has tried this before there must be a solution, don't you think?

JacksonCochrane

08-03-2004, 11:54 AM

I'm sorry, I don't code for Netscape. I have never heard of the problem which was described in the narrative you pasted. It is my understanding that if you detect the user's browser, onload, you can then load, meaning using document.write from a JS library file, code that will be specifically tailored to that browser. The code you currently use, with all of that if document.images, and document.images[0].src is probably the code that works for Netscape. It would be quite a bit of work but, I would take the code you have that already works with Netscape, and COPY it into a JS library file, then adapt the code I posted earlier, since, I am certain it works for IE, to your original, and put that in another JS library file. Then onload, detect the browser, and launch a document.write to write the browser specific library to the main document.

I see that you have one JS library already. At least it downloaded when I saved your page.

A JS library is nothing more than an ordinary text file with the .js extention. You can easily create one with NotePad.

Also, just as an aside, you might using an earlier suggestion I posted, since I see that you have plenty of CSS to take care of eliminating the "blue outline." Try making the links, like this:

<a href=java script:swapInfo(1)><img src='Images/1.gif' id='1' alt='1'></a>

Beyond this, at this time, I can't think of anything else to offer.

Here's a simple browser detector:

<HTML>
<Head>
<Script Language=JavaScript>

window.onbeforeunload = askBookmark;

function askBookmark(){

var isBrowser = navigator.appName;
var isVersion = parseInt(navigator.appVersion);

if ((isBrowser == "Microsoft Internet Explorer")&&(isVersion >= 4))
{
if (confirm('Do you want to add us to your Favorites?'))
{
window.external.AddFavorite(window.location,'Web Site');
}
}
}

</Script>
</Head>
<Body>
<p>Netscape users use CTRL-D to add us to your bookmarks</p>

</Body>
</HTML>

JacksonCochrane

08-03-2004, 01:20 PM

Here is an example of what I mean.

<HTML>
<Head>
<Script Language=JavaScript Src='IE.js'></Script>
<Script Language=JavaScript Src='NS.js'></Script>
<Script>

function checkBrowser(){

isBrowser = navigator.appName;
if (isBrowser == "Microsoft Internet Explorer")
{document.write(IEcode.aTable)}
else {document.write(NScode.aTable)}
}

</Script>
</Head>
<Body>
<p> Here is some other content </p>


<Script> checkBrowser() </Script>
</Body>
</HTML>
-------------- IE.js ---------------

IEcode = new Object;
IEcode.aTable = "<HTML><Body><Table width=50% height=220 align=center bgcolor=lightyellow cellpadding=3 cellspacing=0 border=1><TR><TD width=60% align=center>Hello Internet Explorer Users</TD></TR></Table></Body></HTML>"

------

--------- NS.js ------------

NScode = new Object;
NScode.aTable = "<HTML><Body><Table width=50% height=220 align=center bgcolor=lightyellow cellpadding=3 cellspacing=0 border=1><TR><TD width=60% align=center>Hello NetScape Users</TD></TR></Table></Body></HTML>"

--------

Note how the two JS libraries are linked to the main document in the Header. Note the document.write command which writes the object's sole field.

I hope that this will help.

jellyjulie

08-03-2004, 03:20 PM

Well I think we'll just go with not worrying about Netscape users (like you do), since hardly any of our clients probably use Netscape.

And your code suggestion worked on IE.
So
THANK YOU! THANK YOU! THANK YOU!
:)

JacksonCochrane

08-03-2004, 03:43 PM

Oh, you are very welcome. Good luck with your project. Sometimes I'm able to help others, sometimes not, sometimes I come to the question too late. But, I like to look at these "old" questions, the ones with only 1 or 2 responses, and see if I have anthing useful to offer. I'm glad that I was able to help. Yeah, you know, I think that you just dig yourself a bottomless hole when you try to be all things to all people. If it works in IE, I think you made a good decision to just put this one to rest.