Persistent data after update

Question

I have a webpage that I'm having problems with. It works great: you choose from the drop-down menu and image updates.

The problem is when the page is updated manually: the initial image is displayed, but the drop-down menu remains unchanged; ok, i fixed it.

The real problem is that after the update, when I select a new item, the item is displayed before the update for some reason.

How can I change this so that the new selection after the update is displayed, not the previous one?

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

This is the JavaScript code I'm 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 problems with iframes, as well as other standard browser features (like CSS3 shadow text), what you can do is create a div and then place it absolutely 10,000 pixels from the screen and then preload the images in the div.

So your HTML div:

 <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> 

CSS:

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

some people like to add (optional, with the exception of mobile clients):

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

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

Answer 2

There are several ways to upload (or preload) images to a page, if that is what you need. You can use javascript to load all images in 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 will cache these images, so you can even get rid of the container after downloading all the images if you want!

An additional advantage is that the images will not be reloaded from the server if the page is refreshed. If you want a specific image to appear when the page loads after the update, I would suggest changing window.location.hash (the hash of the URL) to the image identifier and read this property when the page loads and displays the corresponding 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 useful to use URL hashes as a kind of "persistence" on pages / updates / stories.

(If you think this is too exhausting and useless!)

Browsers, including IE, cache images at their URL. So, as long as the src attribute remains unchanged for the previously loaded and currently viewed image, the image will not be reloaded from the server, just taken from the cache is pretty fast. A preloaded image element may be discarded after the image is loaded - we want the image to be cached by the browser

Answer 3

After loading the page, you can force reset in the form (you will also need a form):

 document.forms[0].reset() 

Answer 4

I see the problem you are describing, and I assume IE caches the iframe. In fact, when I look at the iframe with the IE9 developer tools, I see that it loads the previously selected document into the iframe.

I suggest simplifying my code. I don't know what your ultimate goal is, but I created a simple test case for you that doesn't use iframes. You can view it in this JSFiddle mode. Note that I used jQuery to simplify 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); }); });