刷新后的持久數據

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的簡單測試用例。 你可以在這個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);
    });
});