刷新后数据持久化

Question

我有一个网页遇到问题。它工作正常：您从下拉菜单中进行选择，图像就会更新。

问题是当手动刷新页面时：显示初始图像，但下拉菜单选项保持不变；好吧，我解决了这个问题。

真正的问题是，刷新后，当我选择一个新项目时，由于某种原因会显示刷新之前的项目。

如何更改此设置，以便显示刷新后的新选择而不是上一个选择？

我的代码在 Chrome、Firefox 和 Safari 中运行良好，但在 IE9 中运行不佳。

这是我正在使用的 JavaScript 代码：

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

这是 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 存在 iframe 以及其他相当标准的浏览器功能（例如 CSS3 文本阴影）的问题，您可以做的是创建一个 div，然后将其放置在距离屏幕大约 10000 像素的位置，然后在 div 中预加载图像。

因此，您的 div 的 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>

CSS:

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

有些人还喜欢添加（不必要的，移动客户除外）:

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

到该 CSS 中。这将在所有已知的浏览器中预加载您的图像。

Answer 2

如果您需要的话，有几种方法可以将图像加载（或预加载）到页面中。您可以使用 javascript 将所有图像加载到“隐藏”容器中 (

)。

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

浏览器会缓存这些图像，因此如果您愿意，您甚至可以在加载所有图像后删除容器！

另一个优点是，在页面刷新时不会从服务器重新加载图像。如果您希望在刷新后加载页面时显示特定图像，我建议将 window.location.hash （URL 哈希）更改为图像的 ID，并在以下情况下读取此属性：页面加载并显示适当的图像。

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

然后：

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

尝试一下...您可能会发现使用 URL 哈希作为一种“持久性”非常有用页面/刷新/历史记录也是如此。

（如果您认为本文太冗长且无用，请回帖！）

浏览器（包括 IE）通过 URL 缓存图像。因此，只要预加载和当前正在查看的图像的 src 属性保持不变，图像就不会从服务器重新加载，而只是从缓存中获取 - 这非常快。一旦图像加载，预加载的图像元素就可以被丢弃 - 我们只希望浏览器缓存图像

Answer 3

页面加载后，您可以强制重置表单（您也需要一个表单）：

document.forms[0].reset()

Answer 4

我看到你所描述的问题，我的猜测是 IE 正在缓存 iframe。事实上，当我用IE9的开发者工具查看iframe时，我可以看到它正在加载iframe中先前选择的文档。

我建议简化你的代码。我不知道您的最终目标是什么，但我为您创建了一个不使用 iframe 的简单测试用例。您可以在 这个 JSFiddle 中实时查看它。请注意，我使用 jQuery 来简化 DOM 操作。

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);
    });
});