Постоянные данные после обновления

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 имеет проблемы с iframes, а также с другими довольно стандартными функциями браузеров (например, с текстовой тенью CSS3), вы можете создать div и затем расположить его на расстоянии около 10000 пикселей от экрана, а затем предварительно загрузить изображения 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 для загрузки всех изображений в «скрытый» контейнер (<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-хэш) на идентификатор изображения и прочитать это свойство при загрузке страницы и отображении соответствующего изображения.

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. Фактически, когда я смотрю на iframe с помощью инструментов разработчика IE9, я вижу, что он загружает ранее выбранный документ в 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);
    });
});