Загрузка изображения с помощью jquery: дополнительный запрос в IE9

У меня есть такая страница:

<script type="text/javascript">
    $(function () {
        $("#links a").mouseover(function () {
            $("#flag").attr("src", "/Images/" + $(this).attr("id") + ".png");
        });
    });
</script>
<div>
    <img id="flag" src="/Images/austria.png" alt="austria" />
</div>
<div id="links">
    <a id="austria" href="#">austria</a>
    <a id="brazil" href="#">brazil</a> 
    <a id="japan" href="#">japan</a>
</div>

Каждая вещь отлично работает в разных браузерах (FF10, Chrome, IE9). Но когда я просматриваю сеть в IE9 с помощью "инструментов разработчика F12", каждый раз, когда эта мышь переходит по ссылке, есть дополнительный запрос для изображения. Но в FF и Chrome, проверяя с помощью FireBug и инструментов разработчика, для каждого изображения есть только один запрос и второй раз, когда вы переходите по ссылке, запрос отсутствует.

  • В чем проблема с IE9 (или моим кодом;))?

  • Есть ли какие-либо другие решения для моей проблемы, чтобы предотвратить эту проблему?

(На самом деле я хочу что-то вроде Yahoo Hot news, что для каждого новостного изображения его запрос просто вызывается один раз, даже в IE9).

Ответы

Ответ 1

Вы не проверяете, загрузили ли вы текущее изображение; поэтому он перезагрузит его, даже если он уже существует. Некоторые из браузеров, вероятно, использовали кешированную версию изображения и, следовательно, не получили ее снова.

$(function () {
    $("#links a").mouseover(function () {
        var $flag = $("#flag");
        var newImage = "/Images/" + $(this).attr("id") + ".png";

        if ($flag.attr("src").indexOf(newImage) == -1)
            $flag.attr("src", newImage);
    });
});

Edit

Из нашего разговора я написал следующее: это то, о чем вы тоже говорили?

HTML

<div class="flag">
    <img id="flag" src="/Images/austria.png" alt="austria" />
</div>
<div id="links">
    <a id="austria" href="#">austria</a>
    <a id="brazil" href="#">brazil</a> 
    <a id="japan" href="#">japan</a>
</div>​​​

Javascript

$(function () {
    $("#links a").mouseover(function () {
        var $flag = $(".flag");;
        var $flagImg = $("#flag");
        var imageID = $(this).attr("id");

        if ($flagImg.attr("src").indexOf(imageID) == -1)
            $flag.html('<img id="flag" src="/Images/' + imageID  + '.png" alt="' + imageID + '" />');
    });
});

Live DEMO