1

私はそのようなページを持っています:

<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）で正常に動作します。しかし、「F12開発者ツール」を使用してIE9でネットワークを監視すると、マウスがリンクの上に移動するたびに、画像に対する追加の要求があります。しかし、FF と Chrome では、FireBug と開発者ツールで確認すると、画像ごとに 1 回だけリクエストがあり、2 回目にリンクをたどると、リクエストはありません。

  • IE9 (または私のコード ;)) の問題は何ですか?

  • この問題を防ぐために、私の問題に対する他の解決策はありますか?

(実際には、Yahoo Hot news のように、すべてのニュース画像に対して、その要求が IE9 でも 1 回だけ呼び出されるようにしたい)。

4

1 に答える 1

0

現在のイメージを既に読み込んでいるかどうかを確認していません。したがって、すでに存在していても再ロードされます。一部のブラウザは、キャッシュされたバージョンの画像を使用していた可能性があり、そのため再度取得することはありませんでした。

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

編集：

私たちの会話から次のように書きましたが、それはあなたも言及していましたか?

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 + '" />');
    });
});

ライブデモ

于 2012-05-15T12:35:01.153 に答える