Using Javascript to loop images??

[OBAFGKM_RNS]

Let's say I have a Javascript function that loops over and over. In
that function i have it alternating images on a button this way:

if(var==0){
var myHTML = "<input type='button' style='background-image:
url(grnbutt.jpg);etc. etc.'>";
var outq = document.getElementById("qbutt");
outq.innerHTML = myHTML;
}
else{
var myHTML = "<input type='button' style='background-image:
url(grnbuttdark.jpg);etc. etc.'>";
var outq = document.getElementById("qbutt");
outq.innerHTML = myHTML;
}

This works great using Firefox, and works with Internet Explorer also
EXCEPT if its set to "Check for newer versions of stored pages: Every
visit to the page". With that setting, IE will download those 2 images
from the server every single time through the loop. So then I tried
putting both images on the same jpg and then moving the image:

if(var==0){
var elem = document.getElementById("grn");
elem.style.backgroundPosition = "-100px 0";
}
else{
var elem = document.getElementById("grn");
elem.style.backgroundPosition = "center";
}

This also works, but also, constantly downloads new images when using
IE with the above setting. Microsoft calls this a "feature". They then
offer a fix for this "feature" that... doesn't work. Preloading
doesn't work. Loading the 2 images in a <divset to invisible doesn't
work. I've tried suggestions of creating php files that tell the
browser that the images don't expire for years. That didn't work for
me. Many people have also suggested that there is no way around it...
it can't be fixed until Microsoft fixes it.

So, is there any javascript way to loop 2 images on a button, without
Internet Explorer constantly downloading those 2 images over and over,
when its set to "Check for newer versions of stored pages: Every visit
to the page"??

[Darko]

On Apr 17, 7:29 pm, [e-mail] wrote:

Let's say I have a Javascript function that loops over and over. In
that function i have it alternating images on a button this way:

if(var==0){
var myHTML = "<input type='button' style='background-image:
url(grnbutt.jpg);etc. etc.'>";
var outq = document.getElementById("qbutt");
outq.innerHTML = myHTML;
}
else{
var myHTML = "<input type='button' style='background-image:
url(grnbuttdark.jpg);etc. etc.'>";
var outq = document.getElementById("qbutt");
outq.innerHTML = myHTML;
}

This works great using Firefox, and works with Internet Explorer also
EXCEPT if its set to "Check for newer versions of stored pages: Every
visit to the page". With that setting, IE will download those 2 images
from the server every single time through the loop. So then I tried
putting both images on the same jpg and then moving the image:

if(var==0){
var elem = document.getElementById("grn");
elem.style.backgroundPosition = "-100px 0";
}
else{
var elem = document.getElementById("grn");
elem.style.backgroundPosition = "center";
}

This also works, but also, constantly downloads new images when using
IE with the above setting. Microsoft calls this a "feature". They then
offer a fix for this "feature" that... doesn't work. Preloading
doesn't work. Loading the 2 images in a <divset to invisible doesn't
work. I've tried suggestions of creating php files that tell the
browser that the images don't expire for years. That didn't work for
me. Many people have also suggested that there is no way around it...
it can't be fixed until Microsoft fixes it.

So, is there any javascript way to loop 2 images on a button, without
Internet Explorer constantly downloading those 2 images over and over,
when its set to "Check for newer versions of stored pages: Every visit
to the page"??

Did you try putting the image in the div, and setting its src argument
to the specified string, having preloaded them before that?
Thinking clearly, however, it makes perfect sense if that doesn't
work, since that exactly was the whole point - they made a feature
that checks for newer versions every time, and now you want to
override this feature - thus directly opposing the user's will -
that's not good design. The user's the boss, not you.

However, the above solution (not setting css, but having x = new
Image( "..." ), then later saying
document.getElementById( "image1" ).src = "...", might work, at least
it's worth a shot?

[OBAFGKM_RNS]

Thanks Darko. I will try to figure out what you wrote, but I am too
burned out at the moment to try it. However, the Internet Explorer
issue is this: Its supposed to check for a new page on every visit to
that page, NOT download the same image over and over again on the same
page without it being refreshed or revisited. I have no problem with
it downloading fresh images on each visit to the page (which is what
its supposed to do). Its a known bug that has many attempted
solutions. None, so far, have worked.

On Apr 17, 2:34 pm, Darko <[e-mail]:

On Apr 17, 7:29 pm, [e-mail] wrote:

Let's say I have a Javascript function that loops over and over. In
that function i have it alternating images on a button this way:

if(var==0){
var myHTML = "<input type='button' style='background-image:
url(grnbutt.jpg);etc. etc.'>";
var outq = document.getElementById("qbutt");
outq.innerHTML = myHTML;
}
else{
var myHTML = "<input type='button' style='background-image:
url(grnbuttdark.jpg);etc. etc.'>";
var outq = document.getElementById("qbutt");
outq.innerHTML = myHTML;
}

This works great using Firefox, and works with Internet Explorer also
EXCEPT if its set to "Check for newer versions of stored pages: Every
visit to the page". With that setting, IE will download those 2 images
from the server every single time through the loop. So then I tried
putting both images on the same jpg and then moving the image:

if(var==0){
var elem = document.getElementById("grn");
elem.style.backgroundPosition = "-100px 0";
}
else{
var elem = document.getElementById("grn");
elem.style.backgroundPosition = "center";
}

This also works, but also, constantly downloads new images when using
IE with the above setting. Microsoft calls this a "feature". They then
offer a fix for this "feature" that... doesn't work. Preloading
doesn't work. Loading the 2 images in a <divset to invisible doesn't
work. I've tried suggestions of creating php files that tell the
browser that the images don't expire for years. That didn't work for
me. Many people have also suggested that there is no way around it...
it can't be fixed until Microsoft fixes it.

So, is there any javascript way to loop 2 images on a button, without
Internet Explorer constantly downloading those 2 images over and over,
when its set to "Check for newer versions of stored pages: Every visit
to the page"??

Did you try putting the image in the div, and setting its src argument
to the specified string, having preloaded them before that?
Thinking clearly, however, it makes perfect sense if that doesn't
work, since that exactly was the whole point - they made a feature
that checks for newer versions every time, and now you want to
override this feature - thus directly opposing the user's will -
that's not good design. The user's the boss, not you.

However, the above solution (not setting css, but having x = new
Image( "..." ), then later saying
document.getElementById( "image1" ).src = "...", might work, at least
it's worth a shot?