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

有几种方法可以将图像加载（或预加载）到页面中，如果这就是你所追求的。您可以使用javascript将所有图片加载到“隐藏”容器中（<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)

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

另一个优点是，在页面刷新的情况下，不会从服务器重新加载图像。如果您希望在刷新后加载页面时显示特定图像，我建议将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 2

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 3

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

document.forms[0].reset()

Answer 4

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

我建议简化您的代码。我不知道你的最终目标是什么，但我为你创建了一个不使用iframe的简单测试用例。您可以在this 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);
    });
});

刷新后的持久数据

4 个答案: