Persistent data after refresh

I have a web page th开发者_运维知识库at 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>

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.

There are a few ways to load (or preload) images into a page, if that's what you're after. You can use javascript to load all images into a 'hidden' container (<div style="display: none">).

var anImage = new Image
anImage.onload = function() {...} // keep a counter here to make sure all images are in?
anImage.src = ...
$imageContainer.append(anImage)

Browsers would cache these images, so you could even get rid of the container after all images load, if you want!

An added advantage is that images won't be reloaded from the server in the case of a page refresh. If you want a particular image to be shown when the page loads after a refresh, I would suggest changing the window.location.hash (URL hash) to the ID of the image, and read this property when the page loads and display the appropriate image.

http://..../millview/page.html#midnightExpress

and then:

window.onload = function() {
  selected = window.location.hash.substring(1); // selected === 'midnightExpress'
  // show the image
}

Experiment with this... you might find it really useful to use URL hashes as a sort of "persistence" across pages/refreshes/history, too.

(Post back if you think this was too long winded and useless!)

Browsers, including IE, cache images by their URL. So, as long as the src attribute remains the same for the preloaded and currently viewing image, the image won't be reloaded from the server, just picked up from the cache - which is quite fast. The preloaded image element can be discarded once the image has loaded - we only want the image cached by the browser

After your page loads, you can force a reset on the form (you'll need a form too):

document.forms[0].reset()

I see the issue you are describing, and my guess is that IE is caching the iframe. In fact, when I look at the iframe with IE9's developer tools, I can see that it is loading the previously selected document in the iframe.

I suggest simplifying your code. I don't know what your end goal is, but I have created a simple test case for you that does not use an iframe. You can view it live in this JSFiddle. Note that I have used jQuery to simplify the DOM manipulation.

HTML:

<div id="imageViewer">
    <img id="theImage" src="http://guygar.com/millview/self/self00.jpg" alt="The Image!">
</div>

<select id="imageSelector" name="imageSelector">
    <option value="" selected></option>
    <option value="midnightExpress">Midnight Express</option>
    <option value="mirrorEffect">Mirror Effect</option>
    <option value="okComputer">OK Computer</option>
</select>

JavaScript:

$(function() {
    var $theImage = $('#theImage'),
        baseURL = 'http://guygar.com/millview/',
        images = {
            'midnightExpress': 'midnightExpress00.jpg',
            'mirrorEffect': 'mirrorEffect00.jpg',
            'okComputer': 'okComputer00.jpg'
        };

    $('#imageSelector').bind('change', function() {
        var selection = this.value,
            url = [
                baseURL,
                selection,
                '/',
                images[selection]
            ].join('');
        $theImage.attr('src', url);
    });
});