Question

I have a web page that I am having trouble with. It works fine: you select from the drop-down menu and the image updates.

The issue is when the page is manually refreshed: The initial image is displayed but the drop-down menu option stays the same; well, I fixed that.

The real issue is that after the refresh, when I choose a new item, the item before the refresh is displayed for some reason.

How can I change this so the new selection after the refresh is displayed and not the previous one?

My code works fine in Chrome, Firefox, and Safari, but not IE9.

This is the JavaScript code I am using:

function doMillviewInitialise()
{
    window.document.forms[0].reset();
}

And here is the HTML:

<form>
    <select id="millviewStyle" onchange="doMillview();">
        <option value="self">Millview @ Guygar.com&copy;</option>
        <option>----------------------</option>
        <option value="midnightExpress">Midnight Express</option>
        <option value="turnedOn">Turned On</option>
        <option value="storage">Storage</option>
        <option value="plasticStress">Plastic Stress</option>
        <option value="mirrorEffect">Mirror Effect</option>
        <option value="okComputer">OK Computer</option>
        <option value="repertoire">Repertoire</option>
        <option value="calibrate">Calibrate</option>
        <option value="hysteria">Hysteria</option>
        <option value="lastExit">Last Exit</option>
    </select>
</form>

Answer 1

iGuygar IE9 has issues with iframes as well as other pretty standard browsers features (the CSS3 text-shadow for example) what you can do is create a div and then position it absolutely about 10000 pixels off the screen then preload your images in the div.

So your div’s HTML:

<div id="imgpreload">
 <img src="images/pic1.png" alt="pic1" id="pic1">
 <img src="images/pic2.png" alt="pic2" id="pic2">
 <img src="images/pic3.png" alt="pic3" id="pic3">
</div>

The CSS:

#imgpreload {
  position:absolute;
  left:9999px; 
}

some like to also add (unnecessarily, except for mobile customers):

width:1px;
height:1px;
overflow:hidden;

to that CSS. This will preload your images in all known browsers.